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/@[email protected][email protected]/node_modules/@radix-ui/react-slot/dist/index.module.js:47:23) at eval (webpack-internal:///./node_modules/.pnpm/@[email protected][email protected]/node_modules/@radix-ui/react-slot/dist/index.module.js:21:23) at eval (webpack-internal:///./node_modules/.pnpm/@[email protected][email protected][email protected]/node_modules/@radix-ui/react-primitive/dist/index.module.js:46:26) at eval (webpack-internal:///./node_modules/.pnpm/@[email protected]_@[email protected][email protected][email protected]/node_modules/@radix-ui/react-select/dist/index.module.js:322:28) at button at eval (webpack-internal:///./node_modules/.pnpm/@[email protected][email protected][email protected]/node_modules/@radix-ui/react-primitive/dist/index.module.js:46:26) at eval (webpack-internal:///./node_modules/.pnpm/@[email protected][email protected]/node_modules/@radix-ui/react-slot/dist/index.module.js:47:23) at eval (webpack-internal:///./node_modules/.pnpm/@[email protected][email protected]/node_modules/@radix-ui/react-slot/dist/index.module.js:21:23) at eval (webpack-internal:///./node_modules/.pnpm/@[email protected][email protected][email protected]/node_modules/@radix-ui/react-primitive/dist/index.module.js:46:26) at eval (webpack-internal:///./node_modules/.pnpm/@[email protected]_@[email protected][email protected][email protected]/node_modules/@radix-ui/react-popper/dist/index.module.js:79:28) at eval (webpack-internal:///./node_modules/.pnpm/@[email protected]_@[email protected][email protected][email protected]/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/@[email protected][email protected]/node_modules/@radix-ui/react-context/dist/index.module.js:48:28) at Provider (webpack-internal:///./node_modules/.pnpm/@[email protected][email protected]/node_modules/@radix-ui/react-context/dist/index.module.js:48:28) at CollectionProvider (webpack-internal:///./node_modules/.pnpm/@[email protected][email protected][email protected]/node_modules/@radix-ui/react-collection/dist/index.module.js:35:24) at Provider (webpack-internal:///./node_modules/.pnpm/@[email protected][email protected]/node_modules/@radix-ui/react-context/dist/index.module.js:48:28) at Provider (webpack-internal:///./node_modules/.pnpm/@[email protected][email protected]/node_modules/@radix-ui/react-context/dist/index.module.js:48:28) at $cf1ac5d9fe0e8206$export$badac9ada3a0bdf9 (webpack-internal:///./node_modules/.pnpm/@[email protected]@[email protected][email protected][email protected]/node_modules/@radix-ui/react-popper/dist/index.module.js:64:28) at $cc7e05a45900e73f$export$ef9b1a59e592288f (webpack-internal:///./node_modules/.pnpm/@[email protected]_@[email protected][email protected][email protected]/node_modules/@radix-ui/react-select/dist/index.module.js:135:28) at span at Controller (webpack-internal:///./node_modules/.pnpm/[email protected][email protected]/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/[email protected][email protected]/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/[email protected][email protected][email protected][email protected][email protected]/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/@[email protected][email protected][email protected]/node_modules/@tanstack/react-query/build/lib/Hydrate.mjs:31:3) at QueryClientProvider (webpack-internal:///./node_modules/.pnpm/@[email protected][email protected][email protected]/node_modules/@tanstack/react-query/build/lib/QueryClientProvider.mjs:48:3) at TRPCProvider (webpack-internal:///./node_modules/.pnpm/@[email protected]@[email protected]_@[email protected]_@[email protected]_kiuw5sedmeoomoi5tskxnndkj4/node_modules/@trpc/react-query/dist/createHooksInternal-d15d0073.mjs:210:17) at WithTRPC (webpack-internal:///./node_modules/.pnpm/@[email protected]_@[email protected]_@[email protected]_@[email protected].6zg2rcddaxitayxonvlu3qstbq/node_modules/@trpc/next/dist/index.mjs:42:83) at PathnameContextProviderAdapter (webpack-internal:///./node_modules/.pnpm/[email protected]@[email protected][email protected][email protected]/node_modules/next/dist/shared/lib/router/adapters.js:74:11) at ErrorBoundary (webpack-internal:///./node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected]/node_modules/next/dist/compiled/@next/react-dev-overlay/dist/client.js:305:63) at ReactDevOverlay (webpack-internal:///./node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected]/node_modules/next/dist/compiled/@next/react-dev-overlay/dist/client.js:854:919) at Container (webpack-internal:///./node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected]/node_modules/next/dist/client/index.js:77:1) at AppContainer (webpack-internal:///./node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected]/node_modules/next/dist/client/index.js:206:11) at Root (webpack-internal:///./node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected]/node_modules/next/dist/client/index.js:384:11)

May 18 '23 08:05 entropos

When using asChild you should to forward the ref in your custom component

https://www.radix-ui.com/docs/primitives/guides/composition#your-component-must-forward-ref

May 19 '23 13:05 joaom00

i fixed the error by removing the: <SelectPrimitive.Icon asChild> which was wrapped arround the <TbChevronDown className="h-4 w-4 opacity-50" />then the error went away

May 19 '23 15:05 entropos

Having trouble with this, I tried @entropos and that didn't work for me... Seems to not effect things but the console message is scary

Jun 28 '23 01:06 kiikoh

@kiikoh could you please share the section of code you talking about?

Jun 28 '23 11:06 dan5py

any fix found for this?

Oct 20 '23 20:10 rugys

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

Oct 31 '23 14:10 rafael-ferreira-11

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.

Dec 04 '23 00:12 JamesSingleton

I have the same issue as @JamesSingleton, is there any solution to this yet? Using the Form and FormField components along with the Select still outputs:

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

Dec 31 '23 22:12 Jdelbarcogarza

Same issue as @JamesSingleton and @Jdelbarcogarza. When i use {...field} in <Select /> i have the same Warning. Any tips ?

Jan 01 '24 15:01 alexdev006

Encountering the same issue as @JamesSingleton

Jan 03 '24 23:01 shakedlokits

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>
  ...
}

Jan 11 '24 19:01 wirrareka

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>

Feb 02 '24 18:02 bdc

Is there any update on this issue? What puzzles me is that this doesn't happen on every Select component. I have multiple Select components on my page, but only one of them causes this issue.

Apr 02 '24 20:04 nairanvac

any solution to this yet

Apr 09 '24 08:04 conficiusa

This has popped up for me on the Button component. It doesn't appear to conform to the same patterns as the other input elements but the error is the same:

app-index.js:56 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`.

Apr 30 '24 16:04 BenAHammond

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>

It seems this solves the error. @bdc thanks

May 22 '24 12:05 kibrukuture

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.

Jul 01 '24 23:07 shadcn

Here's a stack overflow with helpful answers as well: https://stackoverflow.com/questions/67877887/react-hook-form-v7-function-components-cannot-be-given-refs-attempts-to-access

Jul 02 '24 19:07 christopherpickering

Also having the same issue... None of the prescribed fixes seem to be helping

Any thoughts?

"use client";
import {
  FormControl,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from "@/components/ui/form";
import { camelCaseToTitle } from "@/lib/formUtils";
import {
  Select,
  SelectTrigger,
  SelectValue,
  SelectContent,
  SelectItem,
} from "@/components/ui/select";
import { countries } from "@/lib/countries";
import React from "react";

const CountryField = ({
  fieldItem,
  form,
  defaultCountry,
  selectTrigger,
  ...props
}) => {
  !defaultCountry && (defaultCountry = "US");
  return (
    <>
      <FormField
        control={form.control}
        name={fieldItem.name}
        render={({ field }) => (
          <FormItem>
            <FormLabel className="hidden m:flex">{camelCaseToTitle(fieldItem.name)}</FormLabel>

            <Select
              onValueChange={field.onChange}
              value={field.value}
              defaultValue={defaultCountry}
              {...field}
            >
              <FormControl>
                <SelectTrigger>
                  <SelectValue placeholder="Select A Country" />
                </SelectTrigger>
              </FormControl>
              <SelectContent>
                {countries.map((country, index) => (
                  <SelectItem key={`${index}-country`} value={country.code}>
                    {country.name}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
            <FormMessage />
          </FormItem>
        )}
      />
    </>
  );
};
export default CountryField;

Jul 05 '24 18:07 Elindalyne

Also having the same issue... None of the prescribed fixes seem to be helping

Any thoughts?

"use client";
import {
  FormControl,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from "@/components/ui/form";
import { camelCaseToTitle } from "@/lib/formUtils";
import {
  Select,
  SelectTrigger,
  SelectValue,
  SelectContent,
  SelectItem,
} from "@/components/ui/select";
import { countries } from "@/lib/countries";
import React from "react";

const CountryField = ({
  fieldItem,
  form,
  defaultCountry,
  selectTrigger,
  ...props
}) => {
  !defaultCountry && (defaultCountry = "US");
  return (
    <>
      <FormField
        control={form.control}
        name={fieldItem.name}
        render={({ field }) => (
          <FormItem>
            <FormLabel className="hidden m:flex">{camelCaseToTitle(fieldItem.name)}</FormLabel>

            <Select
              onValueChange={field.onChange}
              value={field.value}
              defaultValue={defaultCountry}
              {...field}
            >
              <FormControl>
                <SelectTrigger>
                  <SelectValue placeholder="Select A Country" />
                </SelectTrigger>
              </FormControl>
              <SelectContent>
                {countries.map((country, index) => (
                  <SelectItem key={`${index}-country`} value={country.code}>
                    {country.name}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
            <FormMessage />
          </FormItem>
        )}
      />
    </>
  );
};
export default CountryField;

You are using both defaultValue and value on select and also remove the {...field} from the select and use name={field.name}

Jul 12 '24 19:07 Maliksidk19

wrap the aschild Fn Component with div, or user forwardRef. eg: Before: <DialogTrigger asChild> <FloatingButton /> </DialogTrigger> After: <DialogTrigger asChild> <div><FloatingButton /></div> </DialogTrigger>

Jul 19 '24 14:07 yimity

ui ui copied to clipboard

Error in Select Component

ui
ui copied to clipboard