mui / mui/base-ui

[popover] With "button" trigger cannot be closed when clicking button

Open
#4,466 4 comments 0 reactions 0 assignees View on GitHub
component: popover docs
Dominant language
TypeScript
Stars
10.9k
Forks
543
Avg merge
1d 20h
Merged PRs (30d)
101

Description

# 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 ](https://base-ui.com/react/components/popover#controlled-mode-with-multiple-triggers), 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

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.