search

radix-ui / primitives

Radix Primitives is an open-source UI component library for building high-quality, accessible design systems and web apps. Maintained by @workos.
https://radix-ui.com/primitives
MIT License
15.84k stars 821 forks source link

[DropdownMenu] Dropdown Trigger doesn't open dropdown on iOS #2580

Open goleary opened 11 months ago

goleary commented 11 months ago

Bug report

Current Behavior

Certain clicks/taps on the dropdown trigger on iOS do not open the dropdown despite firing native click listener. This only happens on iOS.

https://www.loom.com/share/1cab93d5be2c4a0fbaad8a0d9cf51992

Expected behavior

I expect all clicks/taps on the trigger to open the dropdown

Reproducible example

https://codesandbox.io/p/sandbox/recursing-knuth-qt3rpm?file=%2Fsrc%2FApp.tsx%3A17%2C29

Suggested solution

Additional context

Your environment

Software Name(s) Version
Radix Package(s) @radix-ui/react-dropdown-menu 2.0.6
React 17.0.1
Browser Safari 18
Operating System iOS 17.0
goleary commented 11 months ago

If I use a controlled version of the menu the problem seems to go away.

jesse-mindtrip commented 10 months ago

running into the same problem. i can also fix it by adding transform: translate(0,0) on the trigger when not using the controlled version.

have also run into this with the Select component

jaredLunde commented 6 months ago

I am nearly certain that this is due to DropdownMenuTrigger using an onPointerDown event to control the context state instead of onClick, unlike CollapsibleTrigger and others where this issue does not occur. So the reason your controlled example works is because it is using an onClick handler.

https://github.com/radix-ui/primitives/blob/b32a93318cdfce383c2eec095710d35ffbd33a1c/packages/react/dropdown-menu/src/DropdownMenu.tsx#L117-L126

onPointer* events are historically super buggy in iOS so this is not surprising.

xJkit commented 5 months ago

I'm surprised that no one has fixed this issue until now.