Validation works incorrectly for React-select with Formik on mobile device

user_14137777 0
Viewed 365

I have connected React-select element with Formik. Validation works fine in a desktop browser. But in mobile browser or mobile browser emulator, I am getting a validation error on first React-select element value change. But I am not getting error on the next value changes. Is this bug in Formik or React-select? Is it possible to fix this issue?

Here is example on codesandbox: https://codesandbox.io/s/musing-mcnulty-62euu?file=/index.js

Please check it only in mobile browser or mobile browser emulator since validation works fine in a desktop browser.

react-select yup formik reactjs
2 Answers

I ran into the same issue recently using react-select with formik, only occurring on mobile browsers/emulators.

The issue appears to be due to react-select causing an onBlur when a selection is made. This onBlur was causing validation of the field immediately after setting the field values, resulting in this known issue occurring: https://github.com/jaredpalmer/formik/issues/2457

The best solution I found is to set your react-select component to not blur when a selection is made:

<Select
  ...
  blurInputOnSelect={false}
/>

Another slightly more hacky fix in some cases would be to add a small delay to places where you blur/set touched

setTimeout(() => {
  formik.setFieldTouched(name, true)
}, 100)

The suggestion by Anveshiano Manney would also work in cases where you don't need validateOnBlur for the entire form

user_179054170

I faced the same issue, not entirely sure why it's not working properly in the mobile browser(safari). However it can be fixed by preventing the validation on "onBlur".

  <Formik
      validateOnBlur={false}
      ....
   >
user_15968840
Related