csandman
[BUG] Select blurs when it is used in other clickable element
Description
https://user-images.githubusercontent.com/50099653/181796105-856cd91e-29ae-40b5-8f84-e40ecf76cb86.mov
chakra-react-select Version
4.1.4
Link to Reproduction
No response
TypeScript?
- [X] Yes I use TypeScript
Steps to reproduce
- Go to '...'
- Click on '...'
- Scroll down to '...'
- See error
Operating System
- [X] macOS
- [ ] Windows
- [ ] Linux
- [ ] iOS/iPadOS
- [ ] Android
Additional Information
No response
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.
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.