Popover cannot be controlled programmatically consistently

[Benrajalu]

Current behavior

When providing open and setOpen 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 the Disclosure 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

• Open this codesandbox
• Try typing in the input (triggering onChange={() => setOpen(true)})
• Try clicking on the button, a Disclosure for the Popover

The Popover will flash from closed to open. It should close.

• Repeat the first two steps, then click on the input again

The Popover will remain open, when it should close.

Expected behavior

• When a 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.
• When opening or closing a Popover through an external state, the Disclosure state should be updated.

Workaround

#3496 (comment)

Possible solutions

No response

[diegohaz]

Steps to reproduce the bug

• Open this codesandbox
• Try typing in the input (triggering onChange={() => setOpen(true)})
• Try clicking on the button, a Disclosure for the Popover

The Popover will flash from closed to open. It should close.

• Repeat the first two steps, then click on the input again

The Popover will remain open, when it should close.

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 PopoverDisclosure element serves as an outside element that hides the popover when it gains focus (on mouse down) and re-opens the popover on click.

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 PopoverDisclosure element using the code below:

const popover = usePopoverStore();
const disclosureRef = useRef<HTMLButtonElement>(null);
const disclosureElement = popover.useState("disclosureElement");

useEffect(() => {
  popover.setDisclosureElement(disclosureRef.current);
}, [popover, disclosureElement]);

<PopoverDisclosure ref={disclosureRef} />

[Benrajalu]

That is indeed a working workaround, thanks a lot.
It wasn't clear at all to us that we were effectively creating that second disclosure by programatically opening the popover through an apparently unrelated event. An option would indeed be very welcome, if only as a pointer that something automatic may happen if we don't disable it.

[ArthurGoupil]

I think it partly fixes the issue.
I still have weird behaviours with controlled popovers :/

Enregistrement.de.l.ecran.2024-02-28.a.17.56.37.mov

[diegohaz]

@ArthurGoupil Could you please provide a repro?

[ArthurGoupil]

False alarm @diegohaz , problem was on my side.
Sorry for that!