RobinMalfait
commented
1 year ago Hey! Thank you for your bug report! Much appreciated! 🙏
This is expected behaviour because the checkboxes aren't hooked up to anything. We didn't want to do that because we didn't want it to be too opinionated. For example we can:
- Wrap it in a Form?
- Use native state?
- What does the state object look like?
- Is it a set of filters?
- Is it an array of booleans per filter?
- Use a form library
- but which form library?
Right now what is happening is that the panel is unmounting / remounting and therefore throwing away DOM related state.
What you can do depends on what you actually want:
- You can tell
Popover.Panelto not unmount by using<Popover.Panel unmount={false}>...</Popover.Panel>that way everything stays in the DOM and when you re-open it the state will still be there. You have to watch out with this because if you have a lot of items in the DOM your page can get slower because there is unnecessary stuff to keep track off. (Please measure this if you run into performance issues!) - You can also hook up the checkboxes to some state that live in the current component. Then it doesn't matter if you mount/unmount the
Popover.Panelbecause it will read the data from those state hooks.
I hope this helps!
JoHeyJo
What component (if applicable)
Describe the bug If I check one of the checkboxes in the dropdown panel, close it, and open it again, the checkbox is "unchecked". The checkbox seems to get reset every time the panel is closed. Instead of the normal behavior which would be for the checkbox to remain "checked".
To Reproduce
Expected behavior When the user opens the dropdown panel and "checks" any checkbox and closes the dropdown panel. The checkbox should remain "checked" until user "unchecks" it.
Screenshots If applicable, add screenshots to help explain your problem.
Browser/Device (if applicable)
Additional context Input tag and label tag are pointing to each other. Also, I've tried the code exactly as it comes from Tailwind, without any modifications and the issue persists. However, it seems to be working just fine on the website. Link above.