mui / mui/base-ui

[menu] Closes as soon as it's opened when extending the trigger's tap area with absolute-positioned element

Open
#3,184 3 comments 0 reactions 0 assignees View on GitHub
component: menu has workaround type: bug
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

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.