[blur event] Why does handleBlur updates field value?

What is the current behavior?

onBlur and onFocus callbacks are required to mark field as touched to display per-field validation. onBlur and onFocus assume DOM event is passed and current field value corresponds to value of the underlying DOM element.

That behavior is not working for custom components. If custom component is used in place of input the value property of DOM element that originates event can not be equal to that of a component itself.

For example, we use CheckBoxGroup which has value property defined as arrayOf(string). This component still emits onFocus and onBlur events when individual checkboxes are checked/unchecked and passes DOM event through. This DOM event is used by blur, value is extracted from it and this value is no longer an array but string true, since this value is read from checked property of a checkbox.

What is the expected behavior?

onBlur event handler shouldn’t update the value of the field and shouldn’t assume that event object passed in is actually a DOM event. onBlur handler should update touched property of the field so that validation is still displayed.

Is there any reason why onBlur event updates form state? Can we use onChange events exclusively to update form state?

What’s your environment?

All environments

[pvjones]

Using event.preventDefault() was not working for me, since input.touched was then not set to true (this is needed in my case for displaying input error hints). I think this is related to what @An6r mentioned above. It’s not pretty, but I ended up passing down a callback that invokes input.onBlur without the event (this also satisfies my TypeScript compilation). If anyone has a better solution I’d love to hear it.

const renderChipInput: SFC<MergedProps> = ({
  input,
  meta: { error, touched },
  ...rest,
}) => {
  const value = input.value || List()

  const onRequestAdd = (chip: any): void => {
    if (invalidChip(chip)) { return }
    input.onChange(input.value.push(chip))
  }
  const onRequestDelete = (chip: any): void => {
    if (value.indexOf(chip) !== -1) {
      input.onChange(input.value.delete(index))
    }
  }

  return (
      <ChipInput
        value={value}
        onRequestAdd={onRequestAdd}
        onRequestDelete={onRequestDelete}
        helperText={touched && error}
        onBlur={e => input.onBlur(undefined)}
        {...rest}
      />
  )
}

const FormChipInput: SFC<BaseFieldProps<MergedComponentProps> & FormChipInputProps> =
  ({ name, componentProps, ...rest }) => {
    return (
      <Field
        name={String(name)}
        component={renderChipInput}
        props={componentProps}
        {...rest}
      />
    )
  }

[mlarcher]

Fwiw, it seems to me that a onBlur={e => { e.preventDefault(); } on the Field element brings us the expected behaviour with no downside. Gotta confirm there is no edge case though.