Custom onBlur on Field overrides default behavior

Bug, Feature, or Question?

Bug/Feature

Current Behavior

a Field with a custom onBlur removes the default validation/touched behavior

<Field name="fname" onBlur={() => console.log("custom")} />

https://codesandbox.io/s/yk9mmj1kwx

Desired Behavior

custom onBlur prop will be chained to the internal handleBlur

Suggested Solutions

in handleBlur

if (this.props.onBlur) this.props.onBlur()

---

• Formik Version: 0.11.11
• React Version: 16.2
• CodeSandbox Link: https://codesandbox.io/s/yk9mmj1kwx

[Andreyco]

How about this?

function formikOnBlur(evt) {
  // formiks default handler
}

function getFieldProps(props) {
  return {
    ...props,
    onBlur: (...args) => {
      formikOnBlur(...args);
      props.onBlur && props.onBlur(...args);
    },
    // ... other props
  };
}

<Field name="email">
  {field => (
    <input
      {...field.getFieldProps({
        onBlur: () => console.log('blur'),
      })}
    />
  )}
</Field>

props getter would chain “overrides” props while still keeps Formik work.

[seanders]

I’m a big fan of the approach outlined by @Andreyco. This would follow the ‘prop getters’ pattern as is outlined here: https://kentcdodds.com/blog/how-to-give-rendering-control-to-users-with-prop-getters

It’s used to great effect in https://github.com/downshift-js/downshift