Popover with "button" trigger cannot be closed when clicking button

[lancej1022]

Bug report

Current behavior

It seems that whenever a button is used to trigger the popover, either via PopoverTrigger or programatically as in this example from the docs , once the popover has been opened via the button trigger it cannot be closed by clicking that same button trigger. The user must either click outside of the popover anywhere other than the trigger or use the escape key. This is in contrast to using something like an icon trigger like in the previously linked example, where clicking the icon trigger repeatedly does actually toggle the popover open state properly.

I tried forking the example from the docs within stackblitz and updating from setOpen(true) to setOpen(prev => !prev) to validate the issue

Expected behavior

I would expect a button trigger, either within the PopoverTrigger component or controlled programmatically, to be able to close the popover when clicked if the popover is already open. This behavior seems to work as expected with any other trigger that isnt a button.

Reproducible example

https://stackblitz.com/edit/8gvbf1wk?file=src%2FApp.tsx

Base UI version

1.3.0

Which browser are you using?

Chrome

Which OS are you using?

Mac OS

Which assistive tech are you using (if applicable)?

n/a

Additional context

I tried a combination of things in userland, including event.preventDefault() and event.stopPropogation() within the sandbox with no luck. In my local code I even tried working around this by detecting the click target within the onOpenChange function but wasnt able to make this work. At this point Im not actually sure if this is solvable in userland

[mj12albert]

It seems that whenever a button is used to trigger the popover, either via PopoverTrigger or programatically as in this example from the docs , once the popover has been opened via the button trigger it cannot be closed by clicking that same button trigger.

This is in contrast to using something like an icon trigger like in the previously linked example

@lancej1022 Didn't understand what you meant, most of the demos in the docs use render a <button> element trigger (PopoverTrigger default) containing an svg icon, and can be repeatedly clicked to cycle the open state

The "Open programmatically" button in the multiple triggers demo intentionally doesn't close the popover:

base-ui/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-controlled/css-modules/index.tsx

Lines 35 to 38 in 66c97c3

	onClick={() => {
	setTriggerId('trigger-2');
	setOpen(true);
	}}

(Maybe something is confusing in our docs)

[lancej1022]

It seems that whenever a button is used to trigger the popover, either via PopoverTrigger or programatically as in this example from the docs , once the popover has been opened via the button trigger it cannot be closed by clicking that same button trigger.
This is in contrast to using something like an icon trigger like in the previously linked example

@lancej1022 Didn't understand what you meant, most of the demos in the docs use render a <button> element trigger (PopoverTrigger default) containing an svg icon, and can be repeatedly clicked to cycle the open state

The "Open programmatically" button in the multiple triggers demo intentionally doesn't close the popover:

base-ui/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-controlled/css-modules/index.tsx

Lines 35 to 38 in 66c97c3

onClick={() => {
setTriggerId('trigger-2');
setOpen(true);
}}
(Maybe something is confusing in our docs)

@mj12albert Thanks for the quick reply! You mightve missed this part in my OP:

I tried forking the example from the docs within stackblitz and updating from setOpen(true) to setOpen(prev => !prev) to validate the issue

So Im aware the example in the docs cannot close the popover because it hardcodes setOpen(true), but if you change that single line to instead toggle the open state youll see that it actually still cannot close the popover. Ive gone ahead and created that fork for you here to hopefully make this clearer https://stackblitz.com/edit/8gvbf1wk?file=src%2FApp.tsx . The key change is on line 52, where the button should toggle the open state now but it doesnt

[mj12albert]

@lancej1022 Oh I see, so when the popover is open, the outside-press/dismiss handler seems to conflict with the button's onClick. Set a ref on the button, then adding this to onOpenChange fixes it:

if (
  !isOpen &&
  eventDetails.reason === 'outside-press' &&
  buttonRef.current?.contains(eventDetails.event.target as Node)
) {
  eventDetails.cancel();
  return;
}

Demo: https://stackblitz.com/edit/8gvbf1wk-pydxhwyv?file=src%2FApp.tsx

[lancej1022]

@mj12albert funny, I had tried an early return with very similar logic but didnt realize eventDetails.cancel() also had to be called. It might be worth including an example for something like this in the docs, since eventDetails.cancel() doesnt appear anywhere on the Popover page and the only example with a button that I saw is the one where it hardcodes open(true)

With that said, I think this issue can safely be closed!