Issue with react-select AsyncCreatableSelect does not show values with Formik

[flora8984461]

I have created a codesandbox here: https://codesandbox.io/s/formik-codesandbox-template-forked-cte9o?file=/TestComponent.js

When I make a selection, my Formik shows form value, but react-select does not. I'm not sure what I'm doing wrong here.

If I change "opt.value" to "opt", it shows the name in the selection, but that's not working with "clear" action and it not what I want to show in the form field.

Any help is appreciated, thanks!

[johnrom]

We discussed this in another issue or discussion. AsyncCreatableSelect requires you pass the full option object. If you only pass opt.value to Formik (I recommend doing this, but it's very hard to use with AsyncCreatableSelect), you then have to select the option that matches formik.values.yourValue and pass that option object to AsyncCreatableSelect. This isn't an issue with Formik, but with AsyncCreatableSelect.

[flora8984461]

Thank you for your reply. Sorry I did not realize it was for AsyncCreatableSelect.

[johnrom]

No worries! hope it helps

[flora8984461]

Wondering if Formik community suggests any Async Creatable Select that works compatible with Formik? Thanks!

[johnrom]

I don't use anything like that, just React-Select w/ plain React hooks like useState, useEffect. Sorry I can't be more helpful!

[flora8984461]

Thank you very much!

[flora8984461]

Thanks, @johnrom , I got an update for my issue, I had another deep look into this, and I found:

I have checked this issue and the sandbox for it is https://codesandbox.io/s/react-select-formik-jet92?file=/src/Form.jsx.

In this example, they are not using <Field> from Formik which makes it behaves differently and can use setFieldValue("fieldname", opt.value) and the clear works fine. I did not notice that they are not using <Field />.

Then I made an updated sandbox of mine:

• Without Field: https://codesandbox.io/s/formik-asynccreatableselect-3-h3t1o?file=/TestComponent.js
• With Field: https://codesandbox.io/s/formik-asynccreatableselect-1-cte9o?file=/TestComponent.js

Though I have no idea why using a Field or not makes this difference... 🤔 But it's a kinda ugly workaround for myself.

Thanks to the community!

[johnrom]

@flora8984461 you'd need to either use <Field /> or useField() and manually bind the onChange and onBlur, etc, handlers to your field. There is more than just onChange going on, and <Field /> hooks all the other functionality up in the background (you pass this background functionality to AsyncCreatableField via {...props.field})

There's a bit of redundancy in your sandbox, and if you clean out that redundancy hopefully it'll show how straightforward Formik's API can be:

https://codesandbox.io/s/formik-asynccreatableselect-1-forked-0yrx0?file=/index.js

[flora8984461]

Thank you very much! This is really helpful!

[flora8984461]

But I do wonder what would happen if not using Field, like this example here. Gonna have a look around.