How can i reset a Select field?

[gmcamposano]

I currently have:

const formRef = useRef<HTMLFormElement>(null)

  const { toast } = useToast()
  async function action(data: FormData) {
    console.log('working...')
    formRef?.current?.reset()
  }

<form action={action} ref={formRef}>
 <Select name="forma_de_pago">
            <SelectTrigger className="w-full">
              <SelectValue placeholder="Selecciona la forma de pago" />
            </SelectTrigger>
            <SelectContent>
              <SelectGroup>
                <SelectItem value="efectivo">Efectivo</SelectItem>
                <SelectItem value="tarjeta">Tarjeta de crédito</SelectItem>
              </SelectGroup>
            </SelectContent>
          </Select>
</form>

How can i make the select form reset back to the placeholder text?

[schmoli]

I did this by adding a button at the end of the list, making sure to change the key assigned to the select so that when I change the value I can force it to re render... here's a simple example:

export const SelectDemo = () => {
  const [key, setKey] = React.useState(+new Date())
  const [value, setValue] = React.useState<string | undefined>(undefined)
  return (
    <>
      <Select key={key} value={value}>
        <SelectTrigger>
          <SelectValue placeholder="Select a Theme" />
        </SelectTrigger>
        <SelectContent>
          <SelectGroup>
            <SelectLabel className="-ml-2 text-xs">Category 1</SelectLabel>
            <SelectItem value="light">Light</SelectItem>
            <SelectItem value="dark">Dark</SelectItem>
            <SelectItem value="system">System</SelectItem>
          </SelectGroup>
          <SelectGroup>
            <SelectLabel className="-ml-2 text-xs">Category 2</SelectLabel>
            <SelectItem value="cobalt2">Cobalt2</SelectItem>
          </SelectGroup>
          <SelectSeparator />
          <Button
            className="w-full px-2"
            variant="secondary"
            size="sm"
            onClick={(e) => {
              e.stopPropagation()
              setValue(undefined)
              setKey(+new Date())
            }}
          >
            Clear
          </Button>
        </SelectContent>
      </Select>
    </>
  )
}

[thiagoleite92]

Thanks, friend. You're a friend.

[Raul-digimob]

This is indeed a way, but adding a single Clear button to every single one it's troublesome, wish there was a way to create an "Clear Selection" SelectItem that does not complain about an empty string value, so it resets

[anis-dr]

@Raul-digimob that would be awesome

[AroyewonTemitope]

Works like magic.

[space-symbol]

or done with value={value || ""} in Select

[Abhishek21k]

check this snippet added a 'x' icon for clearing, used the same approach as the above ans.

<div className="relative w-full max-w-xs">
                  <Select
                    value={selected}
                    onValueChange={(value) => {
                      setSelected(value);
                    }}
                  >
                    <SelectTrigger className="flex justify-between pr-8">
                      <SelectValue placeholder="Select Something" />
                    </SelectTrigger>
                    <SelectContent>
                      {/* ....add content */}
                    </SelectContent>
                  </Select>
                  {selected && (
                    <button
                      onClick={() => {
                        setSelected("");
                      }}
                      className="absolute right-14 top-1/2 -translate-y-1/2 rounded-sm p-1 text-muted-foreground hover:bg-accent hover:text-accent-foreground"
                    >
                      <X className="h-4 w-4" />
                    </button>
                  )}
                </div>

[coderlzw-cn]

Reset Select by passing an onReset method

const SelectTrigger = React.forwardRef<
    React.ElementRef<typeof SelectPrimitive.Trigger>,
    React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger> & { onReset?: () => void }
>(({className, children, onReset, ...props}, ref) => (
    <div
        className={cn(
            "relative z-0 flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
            className
        )}
    >
        <SelectPrimitive.Trigger
            ref={ref}
            className={cn("w-full text-left pl-3 pr-10 py-2 truncate")}
            {...props}
        >
            <span className="w-full pr-2 truncate">{children}</span>
        </SelectPrimitive.Trigger>
        <SelectPrimitive.Icon className={cn(`absolute right-2 cursor-pointer`, !props.value && "pointer-events-none")}>
            {props.value ? <CircleXIcon className="h-4 w-4 opacity-50" onClick={onReset}/> : <ChevronDown className="h-4 w-4 opacity-50 "/>}
        </SelectPrimitive.Icon>
    </div>
))

[Thanhthien94]

Reset Select by passing an onReset method

const SelectTrigger = React.forwardRef<
    React.ElementRef<typeof SelectPrimitive.Trigger>,
    React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger> & { onReset?: () => void }
>(({className, children, onReset, ...props}, ref) => (
    <div
        className={cn(
            "relative z-0 flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
            className
        )}
    >
        <SelectPrimitive.Trigger
            ref={ref}
            className={cn("w-full text-left pl-3 pr-10 py-2 truncate")}
            {...props}
        >
            <span className="w-full pr-2 truncate">{children}</span>
        </SelectPrimitive.Trigger>
        <SelectPrimitive.Icon className={cn(`absolute right-2 cursor-pointer`, !props.value && "pointer-events-none")}>
            {props.value ? <CircleXIcon className="h-4 w-4 opacity-50" onClick={onReset}/> : <ChevronDown className="h-4 w-4 opacity-50 "/>}
        </SelectPrimitive.Icon>
    </div>
))

Good job bro, tks!

[cchin25]

Tried this, but the props.value doesn't ever seem to get a value so the X is never displayed? Can you post a snippet of using it?

Tried it with the form example:

<FormField
          control={form.control}
          name="email"
          render={({ field }) => (
            <FormItem>
              <FormLabel>Email</FormLabel>
              <Select onValueChange={field.onChange} defaultValue={field.value}>
                <FormControl>
                  <SelectTrigger>
                    <SelectValue placeholder="Select a verified email to display" />
                  </SelectTrigger>
                </FormControl>
                <SelectContent>
                  <SelectItem value="m@example.com">m@example.com</SelectItem>
                  <SelectItem value="m@google.com">m@google.com</SelectItem>
                  <SelectItem value="m@support.com">m@support.com</SelectItem>
                </SelectContent>
              </Select>
              <FormDescription>
                You can manage email addresses in your{" "}
                <Link href="/examples/forms">email settings</Link>.
              </FormDescription>
              <FormMessage />
            </FormItem>
          )}
        />

[wan-mureithi]

@cchin25 passing the value in the SelectTrigger worked for me
<SelectTrigger value={field.value}> <SelectValue placeholder="Select a verified email to display" /> </SelectTrigger>
However the the x onclick doesn't work. It just opens the menu, might you have a suggestion
@Thanhthien94? Thanks

[coderlzw-cn]

@cchin25 This is a complete example, with separate select examples and form examples.

const SelectTrigger = React.forwardRef<
    React.ElementRef<typeof SelectPrimitive.Trigger>,
    React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger> & { onReset?: () => void }
>(({className, children, onReset, ...props}, ref) => {
    return (
        <div
            className={cn(
                "relative z-0 flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
                className
            )}
        >
            <SelectPrimitive.Trigger
                ref={ref}
                className={cn("w-full text-left pl-3 pr-10 py-2 truncate")}
                {...props}
            >
                <span className={cn(`w-full pr-2 truncate`, !props.value && "text-neutral-400")}>{children}</span>
            </SelectPrimitive.Trigger>
            <SelectPrimitive.Icon className={cn(`absolute right-2 cursor-pointer`, !props.value && "pointer-events-none")}>
                {props.value ? <CircleXIcon className="h-4 w-4 opacity-50" onClick={onReset}/> : <ChevronDown className="h-4 w-4 opacity-50 "/>}
            </SelectPrimitive.Icon>
        </div>
    )
})

import {Select, SelectContent, SelectItem, SelectTrigger, SelectValue} from "@/components/ui/select"
import {useState} from "react";
import {zodResolver} from "@hookform/resolvers/zod"
import {useForm} from "react-hook-form"
import {z} from "zod"

import {Button} from "@/components/ui/button"
import {Form, FormControl, FormField, FormItem, FormLabel, FormMessage} from "@/components/ui/form"

const FormSchema = z.object({
    email: z.string({required_error: "Please select an email to display.",}).nonempty().email(),
})

function App() {
    const [theme, setTheme] = useState<string>("")

    const form = useForm<z.infer<typeof FormSchema>>({
        resolver: zodResolver(FormSchema),
        defaultValues: {
            email: ""
        }
    })

    function onSubmit(data: z.infer<typeof FormSchema>) {
        console.log("Form Data-->", data)
    }

    return (
        <div className="flex gap-x-8">
            <div className="">
                <Select value={theme} onValueChange={setTheme}>
                    <SelectTrigger asChild className="w-[280px]" value={theme} onReset={() => setTheme("")}>
                        <SelectValue placeholder="Place Select Theme" defaultValue={theme}/>
                    </SelectTrigger>
                    <SelectContent>
                        <SelectItem value="light">Light</SelectItem>
                        <SelectItem value="dark">Dark</SelectItem>
                        <SelectItem value="system">System</SelectItem>
                    </SelectContent>
                </Select>
                <Button onClick={() => console.log("theme-->", theme)}>Theme</Button>
            </div>

            <div>
                <Form {...form}>
                    <form onSubmit={form.handleSubmit(onSubmit)} className="w-[400px] space-y-6">
                        <FormField
                            control={form.control}
                            name="email"
                            render={({field}) => (
                                <FormItem>
                                    <FormLabel>Email</FormLabel>
                                    <Select onValueChange={field.onChange} value={field.value}>
                                        <FormControl>
                                            <SelectTrigger value={field.value} onReset={() => form.resetField("email")}>
                                                <SelectValue placeholder="Select a verified email to display"/>
                                            </SelectTrigger>
                                        </FormControl>
                                        <SelectContent>
                                            <SelectItem value="m@example.com">m@example.com</SelectItem>
                                            <SelectItem value="m@google.com">m@google.com</SelectItem>
                                            <SelectItem value="m@support.com">m@support.com</SelectItem>
                                        </SelectContent>
                                    </Select>
                                    <FormMessage/>
                                </FormItem>
                            )}
                        />
                        <div className="space-x-2">
                            <Button type='button' variant="destructive" onClick={() => form.reset()}>Reset</Button>
                            <Button type="submit">Submit</Button>
                        </div>
                    </form>
                </Form>
            </div>
        </div>
    )
}

export default App

Kapture.2025-01-19.at.16.42.33.mp4

@wan-mureithi When there is a value, the element mouse event needs to be ignored