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.99k stars 838 forks source link

Select an SelectItem in mobile will trigger element below it #2696

Open ilhamwahabi opened 9 months ago

ilhamwahabi commented 9 months ago

Bug report

Current Behavior

This is only happening in mobile version

Expected behavior

When SelectItem selected in mobile, element below it should not be triggered.

Reproducible example

https://codesandbox.io/p/sandbox/cold-sound-ps2wm5

Suggested solution

Additional context

Your environment

Software Name(s) Version
Radix Package(s) @radix-ui/react-select ^2.0.0
React n/a ^18
Browser Edge Version 121.0.2277.106 (Official build) (64-bit)
Assistive tech
Node n/a v20.11.0
npm/yarn npm 10.2.4
Operating System Windows 11 Version 10.0.22621 Build 22621
sidarth-23 commented 9 months ago

My assumption is that, ui primitives does nothing to the z-index of the components. So technically, in your reproduction, you have set a bg-color to the select dropdown which hides the text from the screen.

Setting the z index, fixed to the dropdown fixed the issue for me

florianloechle commented 9 months ago

We are also experiencing this issue. Selecting an item on mobile devices also triggers mouse events on the underlying content even when a z-index is set. This is reproducible on the @radix-ui/themes implementation as well.

vwalexanderjin commented 6 months ago

so any solutions for this, bro!

paukparl commented 4 months ago

For those of you who landed here, this seems to be a duplicate of #1658.

cabello commented 4 months ago

I could be wrong. From my research with a similar issue (a conflict between https://intl-tel-input.com/ mobile popup and having a radix sheet open at the same time).

I suspect this npm package that radix uses: https://www.npmjs.com/package/aria-hidden

When a dialog/sheet/etc shows up they call hideOthers using this package which marks all other dom elements as "show but skip user interactions"

In my case changing the mount point from document.body to inside the dialog content solved the issue, anything within the dialog can be clicked and won't close it.

joeyfigaro commented 1 month ago

I could be wrong. From my research with a similar issue (a conflict between https://intl-tel-input.com/ mobile popup and having a radix sheet open at the same time).

I suspect this npm package that radix uses: https://www.npmjs.com/package/aria-hidden

When a dialog/sheet/etc shows up they call hideOthers using this package which marks all other dom elements as "show but skip user interactions"

In my case changing the mount point from document.body to inside the dialog content solved the issue, anything within the dialog can be clicked and won't close it.

Hey @cabello! What mount point are you changing? My initial thought was the mount point for Dialog.Portal, but setting its mount point to inside Dialog.Content doesn't make a ton of sense given my current setup. What am I missing?