[BUG] Multi-select with a custom component has broken focus about chakra-react-select HOT 3 CLOSED

Been trying to track this down the exact cause of this issue.
I added the custom ValueContainer and closeMenuOnSelect={false} to your example, and it functioned ok.
So it seems like something about updating the chosen values in state.
Let me know if there's anything I can do to help to debug or solve to help solve this asap!

https://codesandbox.io/s/chakra-react-select-custom-option-forked-dfisb?file=/example.js

from chakra-react-select.

Check out this statement from the original react-select docs:

Defining components

When defining replacement components, it is important to do so outside the scope of rendering the Select. Defining a replacement component directly in the components prop can cause issues.

On this topic, React documentation has the following to say:

The problem here isn’t just about performance — remounting a component causes the state of that component and all of its children to be lost.

This statement applies as well when replacing components in react-select with inline definitions.

So if you move the custom components definition outside of the body of the Select component it should work. I updated your example: https://codesandbox.io/s/chakra-react-select-custom-option-forked-8o389b?file=/example.js

That's my bad however for writing it that way in the docs in the first place. The issue doesn't crop up unless the state of the component changes (hence why using the value from state broke it) so I had forgotten that this was an issue. I will update the docs to show that the component should be defined on the outside.

from chakra-react-select.

I'm going to close this because a solution was offered and there has been no activity in a while, let me know if the solution did not work

from chakra-react-select.