Select an SelectItem in mobile will trigger element below it

[ilhamwahabi]

Bug report

Current Behavior

• Open mobile web
• Open Select
• Select an item
• If there are element below the select item, that element will be clicked too

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]

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]

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]

so any solutions for this, bro!

[paukparl]

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

[cabello]

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"

• dialog: https://github.com/radix-ui/primitives/blob/8175208cdbb8577e53f1165678ee0ce28a801837/packages/react/dialog/src/Dialog.tsx#L265
• select: https://github.com/radix-ui/primitives/blob/8175208cdbb8577e53f1165678ee0ce28a801837/packages/react/select/src/Select.tsx#L521

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.