primitives icon indicating copy to clipboard operation
primitives copied to clipboard

DropdownMenu doesn't close on mobile devices in specific cases.

Open GheorgheP opened this issue 1 year ago • 0 comments

Bug report

Current Behavior

Dropdown menu doesn't close on mobile devices when user starts to scroll. This ends-up on having few 2 or more open dropdowns at the same time.

E.g.: You have a filters component with few dropdown menus in it. User opens one dropdown, then he taps on other one, but doesn't do a click, but a tap down and move.

https://github.com/radix-ui/primitives/assets/5592697/0f602277-ebda-44aa-966e-0c6b24f5e910

Expected behavior

Expect the dropdown to close

Suggested solution

It seems the issue is caused by DismissableLayer.usePointerDownOutside hook. Here is the special behaviour for touch devices, and more specifically because of click event. On touch devices if user taps down and then moves cursor, ir doesn't result on firing click event.

I would suggest to add support for this scenario so when use will tap down and move the cursor, can fire the pointerdown event, as in this case browser will not fire the special events (the cause of why there is added the exception for touch devices).

GheorgheP avatar Feb 13 '24 16:02 GheorgheP