ui: Error in Select Component

i am getting an Error by using the Select component:

Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

Check the render method of SlotClone. at TbChevronDown at eval (webpack-internal:///./node_modules/.pnpm/@radix-ui+react-slot@1.0.1_react@18.2.0/node_modules/@radix-ui/react-slot/dist/index.module.js:47:23) at eval (webpack-internal:///./node_modules/.pnpm/@radix-ui+react-slot@1.0.1_react@18.2.0/node_modules/@radix-ui/react-slot/dist/index.module.js:21:23) at eval (webpack-internal:///./node_modules/.pnpm/@radix-ui+react-primitive@1.0.2_react-dom@18.2.0_react@18.2.0/node_modules/@radix-ui/react-primitive/dist/index.module.js:46:26) at eval (webpack-internal:///./node_modules/.pnpm/@radix-ui+react-select@1.2.1_@types+react@18.2.6_react-dom@18.2.0_react@18.2.0/node_modules/@radix-ui/react-select/dist/index.module.js:322:28) at button at eval (webpack-internal:///./node_modules/.pnpm/@radix-ui+react-primitive@1.0.2_react-dom@18.2.0_react@18.2.0/node_modules/@radix-ui/react-primitive/dist/index.module.js:46:26) at eval (webpack-internal:///./node_modules/.pnpm/@radix-ui+react-slot@1.0.1_react@18.2.0/node_modules/@radix-ui/react-slot/dist/index.module.js:47:23) at eval (webpack-internal:///./node_modules/.pnpm/@radix-ui+react-slot@1.0.1_react@18.2.0/node_modules/@radix-ui/react-slot/dist/index.module.js:21:23) at eval (webpack-internal:///./node_modules/.pnpm/@radix-ui+react-primitive@1.0.2_react-dom@18.2.0_react@18.2.0/node_modules/@radix-ui/react-primitive/dist/index.module.js:46:26) at eval (webpack-internal:///./node_modules/.pnpm/@radix-ui+react-popper@1.1.1_@types+react@18.2.6_react-dom@18.2.0_react@18.2.0/node_modules/@radix-ui/react-popper/dist/index.module.js:79:28) at eval (webpack-internal:///./node_modules/.pnpm/@radix-ui+react-select@1.2.1_@types+react@18.2.6_react-dom@18.2.0_react@18.2.0/node_modules/@radix-ui/react-select/dist/index.module.js:215:28) at c (webpack-internal:///./src/components/ui/select.tsx:29:11) at Provider (webpack-internal:///./node_modules/.pnpm/@radix-ui+react-context@1.0.0_react@18.2.0/node_modules/@radix-ui/react-context/dist/index.module.js:48:28) at Provider (webpack-internal:///./node_modules/.pnpm/@radix-ui+react-context@1.0.0_react@18.2.0/node_modules/@radix-ui/react-context/dist/index.module.js:48:28) at CollectionProvider (webpack-internal:///./node_modules/.pnpm/@radix-ui+react-collection@1.0.2_react-dom@18.2.0_react@18.2.0/node_modules/@radix-ui/react-collection/dist/index.module.js:35:24) at Provider (webpack-internal:///./node_modules/.pnpm/@radix-ui+react-context@1.0.0_react@18.2.0/node_modules/@radix-ui/react-context/dist/index.module.js:48:28) at Provider (webpack-internal:///./node_modules/.pnpm/@radix-ui+react-context@1.0.0_react@18.2.0/node_modules/@radix-ui/react-context/dist/index.module.js:48:28) at $cf1ac5d9fe0e8206$export$badac9ada3a0bdf9 (webpack-internal:///./node_modules/.pnpm/@radix-ui+react-popper@1.1.1@types+react@18.2.6_react-dom@18.2.0_react@18.2.0/node_modules/@radix-ui/react-popper/dist/index.module.js:64:28) at $cc7e05a45900e73f$export$ef9b1a59e592288f (webpack-internal:///./node_modules/.pnpm/@radix-ui+react-select@1.2.1_@types+react@18.2.6_react-dom@18.2.0_react@18.2.0/node_modules/@radix-ui/react-select/dist/index.module.js:135:28) at span at Controller (webpack-internal:///./node_modules/.pnpm/react-hook-form@7.43.9_react@18.2.0/node_modules/react-hook-form/dist/index.esm.mjs:540:37) at SelectField (webpack-internal:///./src/components/form-elements/SelectField.tsx:16:11) at form at FormProvider (webpack-internal:///./node_modules/.pnpm/react-hook-form@7.43.9_react@18.2.0/node_modules/react-hook-form/dist/index.esm.mjs:177:13) at UserEditForm (webpack-internal:///./src/components/forms/UserEditForm.tsx:25:11) at span at div at section at HomeLayout (webpack-internal:///./src/components/layout/HomeLayout.tsx:16:11) at Home (webpack-internal:///./src/pages/home/index.tsx:19:102) at main at div at PageLayout (webpack-internal:///./src/components/layout/PageLayout.tsx:16:11) at SessionProvider (webpack-internal:///./node_modules/.pnpm/next-auth@4.22.1_next@13.4.2_nodemailer@6.9.2_react-dom@18.2.0_react@18.2.0/node_modules/next-auth/react/index.js:455:24) at MyApp (webpack-internal:///./src/pages/app.tsx:21:11) at Hydrate (webpack-internal:///./node_modules/.pnpm/@tanstack+react-query@4.29.5_react-dom@18.2.0_react@18.2.0/node_modules/@tanstack/react-query/build/lib/Hydrate.mjs:31:3) at QueryClientProvider (webpack-internal:///./node_modules/.pnpm/@tanstack+react-query@4.29.5_react-dom@18.2.0_react@18.2.0/node_modules/@tanstack/react-query/build/lib/QueryClientProvider.mjs:48:3) at TRPCProvider (webpack-internal:///./node_modules/.pnpm/@trpc+react-query@10.26.0@tanstack+react-query@4.29.5_@trpc+client@10.26.0_@trpc+server@10.2_kiuw5sedmeoomoi5tskxnndkj4/node_modules/@trpc/react-query/dist/createHooksInternal-d15d0073.mjs:210:17) at WithTRPC (webpack-internal:///./node_modules/.pnpm/@trpc+next@10.26.0_@tanstack+react-query@4.29.5_@trpc+client@10.26.0_@trpc+react-query@10.26.6zg2rcddaxitayxonvlu3qstbq/node_modules/@trpc/next/dist/index.mjs:42:83) at PathnameContextProviderAdapter (webpack-internal:///./node_modules/.pnpm/next@13.4.2@babel+core@7.21.8_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/shared/lib/router/adapters.js:74:11) at ErrorBoundary (webpack-internal:///./node_modules/.pnpm/next@13.4.2_@babel+core@7.21.8_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/compiled/@next/react-dev-overlay/dist/client.js:305:63) at ReactDevOverlay (webpack-internal:///./node_modules/.pnpm/next@13.4.2_@babel+core@7.21.8_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/compiled/@next/react-dev-overlay/dist/client.js:854:919) at Container (webpack-internal:///./node_modules/.pnpm/next@13.4.2_@babel+core@7.21.8_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/client/index.js:77:1) at AppContainer (webpack-internal:///./node_modules/.pnpm/next@13.4.2_@babel+core@7.21.8_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/client/index.js:206:11) at Root (webpack-internal:///./node_modules/.pnpm/next@13.4.2_@babel+core@7.21.8_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/client/index.js:384:11)

About this issue

Original URL
State: open
Created a year ago
Reactions: 5
Comments: 15 (1 by maintainers)

Most upvoted comments

Encountered this issue. It seems there are two colliding minor problems here, which made it more difficult to diagnose.

1 - The ref and value belong on different elements 2 - the onChange attribute is renamed

Here’s the adjustment I made:

<Select value={field.value} name={field.name} onValueChange={field.onChange}>
  <SelectTrigger>
    <SelectValue onBlur={field.onBlur} ref={field.ref} />
  </SelectTrigger>
  <SelectContent>
    ...
  </SelectContent>
</Select>

+22

bdc on Feb 2, 2024

I just ran into this issue doing something like

<FormField
  control={form.control}
  name="existingAthlete"
  render={({ field }) => (
    <FormItem>
      <FormLabel>Existing Player</FormLabel>
      <FormControl>
        <Select {...field}>
          <SelectTrigger>
            <SelectValue placeholder="Select a player" />
          </SelectTrigger>
          <SelectContent>
            <SelectGroup>
              <SelectItem value="player1">John Doe</SelectItem>
              <SelectItem value="player2">Jane Doe</SelectItem>
            </SelectGroup>
          </SelectContent>
        </Select>
      </FormControl>
      <FormDescription>
        Select an existing player (if they have entered the portal before).
      </FormDescription>
      <FormMessage />
    </FormItem>
  )}
/>

as spreading field is shown in @shadcn’s form docs

<FormField
  control={form.control}
  name="username"
  render={({ field }) => (
    <FormItem>
      <FormLabel>Username</FormLabel>
      <FormControl>
        <Input placeholder="shadcn" {...field} />
      </FormControl>
      <FormDescription>This is your public display name.</FormDescription>
      <FormMessage />
    </FormItem>
  )}
/>

However, doing {...field} on the <Select /> component prints the error mentioned in the description.

JamesSingleton on Dec 4, 2023

i hit the same problem as @entropos and solved it by encapsulating my custom component in forwardRef, then mapping the ref to the SelectTrigger ref

export type Ref = HTMLButtonElement;
const InputTypeSelect = forwardRef<Ref, Props>((props, ref) => {
  ...
      <SelectTrigger className="w-[180px]" ref={ref}>
        <SelectValue placeholder="Select type" aria-label={value}>
          { InputTypeItems[value] }
        </SelectValue>
      </SelectTrigger>
  ...
}

wirrareka on Jan 11, 2024

I was facing the same issue on the following setup:

Remix
useRemixForm (react-hook-form wrapper for Remix)
shadcn select

Problem is that the <Select> component does not forward ref, meaning you can’t {....register('field') for instance. From that you have two options from what I saw:

1 - If you are on React you can use form components from shadcn, or in my case:

import { Controller } from "react-hook-form";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "~/components/ui/select";

...


<Controller
  control={control}
  name="fieldName"
  render={({ field }) => {
    return (
      <Select onValueChange={field.onChange}>
        <SelectTrigger>
          <SelectValue placeholder="placeholder" />
        </SelectTrigger>
        <SelectContent>
          <SelectItem value="1">22</SelectItem>
        </SelectContent>
      </Select>
    );
  }}
/>

That way I don’t get the ref error, but the value is passed to my form state

rafael-ferreira-11 on Oct 31, 2023