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!