onBlur handler on useField hook

[hatamsoyunov]

🙌 onBlur handler and real time validation on useField hook

Hello!

I started learning and practicing Formik, but ran into one problem. My project uses custom placeholders that move up with the focus field.

What do I need for this❓

• Functional component with isFocused state
• Change it with onFocus and onBlur
• Depending on the state, change the position of the placeholder

💪 Started to do

To do this, I made a component CustomField with the useField()hook. Works, cool 😎

But later he noticed that real time validation and error messages stopped working 🤦‍♂️. Because I redefined onBlur handler. After searching, studying the problem did not find a solution using onBlur handler without interfering with Formik.

Prepared Sandbox 👉 Sandbox

🙏 Please tell me what and where I missed, how can this be implemented? Thanks!

[Kinbaum]

In your handleBlur function, you can call field.onBlur and pass the synthetic event to it.
Something like this:

function handleBlur(e) {
    // Call the Formik onBlur event before your custom stuff
    field.onBlur(e);

    if (!field.value.length > 0) {
        onFocus(false);
    }
}

[hatamsoyunov]

@Kinbaum Oh, it works, thanks a lot! 😀

Update 👉 Sandbox Link