Clicking on Select options on mobile screens activates elements behind the Select options

[udohjeremiah]

trafficstars

The Select component, as described from the docs:

Displays a list of options for the user to pick from—triggered by a button.

For devices with cursor/pointer, this works perfectly well; that is, if you click on any option from the list of options that were displayed when the button was triggered, they will be activated.

However, for devices with no cursor/pointer (i.e. mobile devices), this isn't the case; if the options was shown on top of other elements, clicking on an option would activate that option, but also activate the element behind the option.

I've written a simple example below for anyone to test this out:

import * as React from "react";

import {
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectLabel,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";

export function SelectDemo() {
  return (
    <div>
      <ul>
        <li>
          <a href="https://github.com/shadcn-ui/ui">Shadcn/ui</a>
        </li>
        <li>
          <a href="https://github.com/shadcn-ui/ui">Shadcn/ui</a>
        </li>
        <li>
          <a href="https://github.com/shadcn-ui/ui">Shadcn/ui</a>
        </li>
        <li>
          <a href="https://github.com/shadcn-ui/ui">Shadcn/ui</a>
        </li>
        <li>
          <a href="https://github.com/shadcn-ui/ui">Shadcn/ui</a>
        </li>
        <li>
          <a href="https://github.com/shadcn-ui/ui">Shadcn/ui</a>
        </li>
      </ul>
      <Select>
        <SelectTrigger className="w-[180px]">
          <SelectValue placeholder="Select a fruit" />
        </SelectTrigger>
        <SelectContent>
          <SelectGroup>
            <SelectLabel>Fruits</SelectLabel>
            <SelectItem value="apple">Apple</SelectItem>
            <SelectItem value="banana">Banana</SelectItem>
            <SelectItem value="blueberry">Blueberry</SelectItem>
            <SelectItem value="grapes">Grapes</SelectItem>
            <SelectItem value="pineapple">Pineapple</SelectItem>
          </SelectGroup>
        </SelectContent>
      </Select>
    </div>
  );
}

Clicking on any of the options that exactly on top of the link would trigger the option and also the link. Please how should this be solved or is it a bug?

[imopbuilder]

@udohjeremiah

This is an issue with the radix-ui and here is the fix

link: https://github.com/radix-ui/primitives/issues/1658#issuecomment-1690666012

export function SelectDemo() {
	return (
		<div>
			<ul>
				<li>
					<a href='https://github.com/shadcn-ui/ui'>Shadcn/ui</a>
				</li>
				<li>
					<a href='https://github.com/shadcn-ui/ui'>Shadcn/ui</a>
				</li>
				<li>
					<a href='https://github.com/shadcn-ui/ui'>Shadcn/ui</a>
				</li>
				<li>
					<a href='https://github.com/shadcn-ui/ui'>Shadcn/ui</a>
				</li>
				<li>
					<a href='https://github.com/shadcn-ui/ui'>Shadcn/ui</a>
				</li>
				<li>
					<a href='https://github.com/shadcn-ui/ui'>Shadcn/ui</a>
				</li>
			</ul>
			<Select>
				<SelectTrigger className='w-[180px]'>
					<SelectValue placeholder='Select a fruit' />
				</SelectTrigger>
				<SelectContent
					ref={(ref) => {
						if (!ref) return;
						ref.ontouchstart = (e) => {
							e.preventDefault();
						};
					}}
				>
					<SelectGroup>
						<SelectLabel>Fruits</SelectLabel>
						<SelectItem value='apple'>Apple</SelectItem>
						<SelectItem value='banana'>Banana</SelectItem>
						<SelectItem value='blueberry'>Blueberry</SelectItem>
						<SelectItem value='grapes'>Grapes</SelectItem>
						<SelectItem value='pineapple'>Pineapple</SelectItem>
					</SelectGroup>
				</SelectContent>
			</Select>
		</div>
	);
}

[udohjeremiah]

Definitely did the work, thanks.

Won't it be lovely to add a hint or kind of some few words about users who may encounter this in the shadcn document and give them this as a workaround for such situations?

[luizfelmach]

Same issue here.

[shadcn]

This issue has been automatically closed because it received no activity for a while. If you think it was closed by accident, please leave a comment. Thank you.