New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Popover cannot be controlled programmatically consistently #3496
Comments
This comment was marked as outdated.
This comment was marked as outdated.
Actually, after going through these steps, things seem to be working as expected. As of v0.3.6, popovers support multiple disclosure elements, which are automatically assigned upon interaction. When you trigger the popover externally as the user interacts with the input, the input element becomes the popover's disclosure element. Consequently, the I understand that this behavior might not be suitable for this particular scenario, and we might consider adding an option to turn off this automatic disclosure detection in the future. In the meantime, you can ensure that the popover's disclosure element is always assigned to the const popover = usePopoverStore();
const disclosureRef = useRef<HTMLButtonElement>(null);
const disclosureElement = popover.useState("disclosureElement");
useEffect(() => {
popover.setDisclosureElement(disclosureRef.current);
}, [popover, disclosureElement]);
<PopoverDisclosure ref={disclosureRef} /> |
That is indeed a working workaround, thanks a lot. |
I think it partly fixes the issue. Enregistrement.de.l.ecran.2024-02-28.a.17.56.37.mov |
@ArthurGoupil Could you please provide a repro? |
False alarm @diegohaz , problem was on my side. |
Current behavior
When providing
open
andsetOpen
on a Popover, the expectation is that the element can be fully controlled by an external state.However, when updating
open
programmatically through external events, the popover store seems out of sync: clicking on theDisclosure
closes then immediately re-opens the popover. Clicking back on the node responsible for the outside event does not close the Popover, in spite of `hideOnIntereactOutside.Steps to reproduce the bug
onChange={() => setOpen(true)}
)Disclosure
for the PopoverThe Popover will flash from closed to open. It should close.
The Popover will remain open, when it should close.
Expected behavior
Popover
is controlled, on interacting outside or clicking back on an interactive element, the "outside" state should still be driving the display of the Popover.Workaround
#3496 (comment)
Possible solutions
No response
The text was updated successfully, but these errors were encountered: