[BUG] Select blurs when it is used in other clickable element about chakra-react-select HOT 2 CLOSED

Hmm, I'm not sure exactly what's causing this but using clickable elements inside other clickable elements tends to lead to complications. If I had to guess it has something to do with the internal state of the select getting overridden during the render of the element above it. Have you tried adding it inside another container which stops the click event from propagating to the element above it?

Something like this:

<Box onClick={(e) => e.stopPropagation()}>
  <Select />
</Box>

Either that or wrapping both the outside clickable element and the select as sibling children of the same relatively position container and using absolute positioning on the select itself.

If you could give me a minimal reproduction using one of the CodeSandbox templates I could probably give you more specific advice, otherwise there's not much I can do with just a video.

from chakra-react-select.

Overall, this is probably happening because the focusable element the Select is inside of is stealing the focus from the Select on click, and the dropdown only stays open while the Select is focused. If you have any more updates on this feel free to leave a comment, but for now I'm closing this for inactivity.

from chakra-react-select.