Select issue in mobile mode

[Ghoral]

Hi, Select mode works well in desktop mode..but once you inspect it in mobile device is has a bug with background clock.

Here I have two screen shots. The select item overlay works fine on desktop mode but in mobile mode when you press an item the background button is also triggered as you can see on my screenshot.

it also triggers the background cancel button.

[dan5py]

Hi @Ghoral, I just tested this out and it looks like a problem with the radix-ui primitives and not directly related to this project. I'll update this issue if I discover something new.

[Ghoral]

Hi @dan5py,

I was able to fix this issue on dropdown component like this

`<DropdownMenuPrimitive.RadioItem ref={ref} className={cn( "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50", className )} onClick={(e) => { e.stopPropagation(); }} {...props}

`

but select component still has issue. I tried to add the same e.stopPropagation() on all component but still was not able to solve the issue.

Just FYI.

Thank you.

[xmliszt]

Encounter the same issue on my side with <Select>. I will try to fix this and make a PR!

[xmliszt]

Hi guys, after some investigation and trial and error with my app, I found a temporary workaround.

In my case, as shown in screenshot above, I have this <Card> element below the <SelectContent>, the card has a onClick handler bind to it, and selectContent component with the normal setup based on shadcn-ui documentation.

so as expected, in Chrome mobile view, or in browsers on my mobile devices, tapping on the select item that overlapped with the card below will trigger the onClick event listener of the card.

I saw previous solutions about onTouchStart and onTouchEnd, onTouchStart works but scrolling of the select items is disabled. onTouchEnd simply does not work for my case.

After further investigation, I realise onClick event only fires after onTouchStart -> onTouchEnd cycle complete. However, by looking into the source code of radix-ui primitive, I realise the code is trying to set the new value changed and then set the open to false which closes the selection content.

My suspicion is that:

• before the onClick event for <SelectContent> gets sent out, the closing of the selection content sheet happens faster than the event being fired. Therefore, the onClick event is actually propagate down to the element below no matter what! (even try to set event.stopImmediatePropagation() doesn't work!)

There is one temporary workaround for shadcn-ui though, while we waiting for the radix-ui finally fix this issue in their source code (I will try to fix but no guarantee haha).

In my case, I use onPointerDown to actually capture the pointer down event. My observation is that, if the below element was receiving a normal tap or click, the onPointerDown event will absolutely get triggered. However, if it was triggered by this bug that passed down from the <Select> component, then onPointerDown event will not get triggered! Therefore, we just need to set a boolean state for us to differentiate between the two scenarios, so that we only perform the necessary task onClick when the actual click happens!

Hope this helps and feel free to suggest alternative workarounds!

[xmliszt]

Submitted a fix to radix-ui team: https://github.com/radix-ui/primitives/pull/2403 Hope it will resolve the issue at its root :)

[shengo333]

same issue on vue still can't find what can i do, probably just use standart select

[0xonerb]

This worked for me for now: https://github.com/citizenofjustice/ocean-goods/pull/24