Checkboxes inside Popover

[danishfareed]

I've been trying to use checkboxes inside the popover,

For UI it's working fine, the checkboxes are displaying but when I check the checkbox and close the popover and open it again the checkbox is not checked. (checkbox is being reset whenever I close the popover).

What I think is, as the popover injects the HTML and when it opens removes it on close, the checkbox values are being reset every time, If it just hides it with the css the checkboxes inside the popover might work.

This can be tested here: beourguest-frontend.pages.dev/listings

I've used the popover in filters.

If anybody can give me suggestions would be very helpful.

Thank you

[JoHeyJo]

Have you found a solution to this issue? I'm experiencing the same problem.

[leonwisdom]

@danishfareed @JoHeyJo Did you manage to find a solution to this problem? I'm having the same issues and have spent way to long on trying to get it to work. Disclosure also suffers the same problems.

[JoHeyJo]

@leonwisdom I don't believe I did.

[iraritchiemeek]

The issue you're seeing happens because the Popover unmounts when it's closed, which resets the checkbox state.

A couple of ways to fix it:

1. Manage state in the parent component
   Store the checkbox state in a parent component and pass it as a prop. This way, even if the Popover closes, the state is saved and reused.

2. Use unmount={false}
   You can prevent the Popover from unmounting when it closes by adding unmount={false} to Popover.Panel. This will hide it with CSS instead of removing it, keeping the checkbox state.

3. Handle state via URL params
   Another option is to persist the checkbox state in the URL. You can read it from the URL params and restore the state when the Popover reopens.