🐛 Issue with SelectTrigger and asChild: React.Children.only error

[luisemaltez]

Hi there, I'm running into an issue using SelectTrigger with the asChild prop. Even in simple implementations like the one below, I get the following error:

React.Children.only expected to receive a single React element child

Here’s a minimal reproduction:

import { Button } from "@/components/ui/button";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
} from "@/components/ui/select";

export default function Page() {
  return (
    <div className="flex flex-col gap-6 p-6 max-w-md mx-auto">
      <h1 className="text-2xl font-bold">Select Component Test</h1>

      <Select>
        <SelectTrigger asChild>
          <Button variant="outline">Select a fruit</Button>
        </SelectTrigger>
        <SelectContent>
          <SelectItem value="apple">Apple</SelectItem>
          <SelectItem value="banana">Banana</SelectItem>
          <SelectItem value="grape">Grape</SelectItem>
          <SelectItem value="orange">Orange</SelectItem>
        </SelectContent>
      </Select>
    </div>
  );
}

💡 Temporary Fix

To get around the error, I updated the SelectTrigger component like so:

function SelectTrigger({ className, size = "default", children, ...props }) {
  return (
    <>
      {props.asChild ? (
        <SelectPrimitive.Trigger asChild {...props} className={className}>
          {children}
        </SelectPrimitive.Trigger>
      ) : (
        <SelectPrimitive.Trigger
          data-slot="select-trigger"
          data-size={size}
          className={cn(/* ... */)}
          {...props}
        >
          {children}
          <SelectPrimitive.Icon asChild>
            <ChevronDownIcon className="size-4 opacity-50" />
          </SelectPrimitive.Icon>
        </SelectPrimitive.Trigger>
      )}
    </>
  );
}

This bypasses the issue by manually checking for the asChild prop and rendering appropriately.

---

Any insight into whether this is the intended behavior or if there’s a better pattern to handle asChild here would be greatly appreciated!

Many thanks 🙌