Mobile View: Dropdown Menu Trigger First Element When clicking in the space between the trigger and the menu after closing the menu.

[Yehya22]

Description

On mobile view, clicking on the space between trigger and menu clicks on the first element after closing the menu, even with stopPropagation applied at multiple levels.

Expected behavior

Clicking on this space should only close the menu and not affect the first item of the dropdown menu.

Additional context

• The issue seems to be specific to mobile views
• I've tried adding stopPropagation at multiple levels:
  • On the dropdown trigger
  • On the dropdown content
  • On individual dropdown items
  • On the parent container
• The issue persists despite these attempts

Screen.Recording.2025-01-08.at.3.08.33.PM.mov

Steps to Reproduce

1. Open the demo in a mobile view.
2. Click the ellipsis button to open the dropdown menu.
3. Click on the space below the ellipsis button and dropdown menu.
4. Observe that the checkmark changes to green after closing the menu.

Repository Link

• bits-ui-dropdown-issue

Dropdown Component File

• src/Dropdown.svelte

Logs

No response

System Info

- Bits UI version: 1.0.0-next.77
- Svelte version: 5.15.0
- Browser: Mobile browsers (Chrome, Safari)

Severity

annoyance

[huntabyte]

In your video your touch cursor is still over the first menu item, so I'm unsure why it wouldn't make sense that it is triggering that. Touch cursors are larger than pointers because they typically align with the size of a finger. If you add more space between your trigger and the menu, you will get the desired behavior:

CleanShot.2025-01-30.at.18.39.00.mp4

I don't think this is really something we should address from a library perspective, because it would be going against the expectations.

Should this issue arise from others, perhaps we could reconsider.