[menu] Closes as soon as it's opened when extending the trigger's tap area with absolute-positioned element
- Dominant language
- TypeScript
- Stars
- 10.9k
- Forks
- 543
- Avg merge
- 1d 20h
- Merged PRs (30d)
- 101
Description
# Bug report
## Current behavior
I believe it's a well known technique to extend the tap area of clickable elements that are too small (according to accessibility guidelines, usability testing, etc.) without affecting their layout or visual appearance by rendering an absolutely-positioned element inside them that bleeds out on each side. With Tailwind, we can do that with e.g. ``. However, when that's done in a `Menu.Trigger` and we click on the "extended" part of the trigger, the menu closes as soon as it's opened:
https://github.com/user-attachments/assets/43f55c90-beba-4378-ad01-c2382464baf7
## Expected behavior
Clicking on any part of `Menu.Trigger`, even when that part is outside the bounds of the button element, should open the menu without closing it instantly.
## Reproducible example
https://codesandbox.io/p/devbox/laughing-glitter-w35dck
## Base UI version
v1.0.0-beta.4
## Which browser are you using?
Chrome, Safari, and Firefox
## Which OS are you using?
macOS
## Which assistive tech are you using (if applicable)?
N/A
## Additional context
❤️
Contributor guide
Assessment
This issue has not been assessed yet.