Búsqueda de sitios web

reactjs - Shadcn Select no se restablece al llamar a form.reset() (react-hook-form)

Estoy usando el componente Shadcn UI Select dentro de un componente FormField (así que estoy usando zod para la validación y react-hook-form para gestionar el estado del formulario).

El componente de formulario se reinicia al enviarlo así:

useEffect(() => {
    form.reset(defaultValues);
    // (...)
}, [form.formState.submitCount])

lo que causa que los valores del formulario (guardados en formState) se restablezcan (por lo que los valores predeterminados se envían con la siguiente presentación), pero los campos Select todavía muestran los elementos seleccionados anteriormente. Aquí está el componente FormField (se generan de manera dinámica):

<FormField
   control={form.control}
   key={position}
   name={position}
   render={({ field }) => (
      <FormItem className="my-5">
         <FormLabel>{position} place</FormLabel>
            <Select onValueChange={(value) => onSelectDancer(field, value)}>
               <FormControl>
                  <SelectTrigger>
                     <SelectValue
                        placeholder="Please select a dancer / couple"
                        {...field}
                     />
                  </SelectTrigger>
               </FormControl>
            <SelectContent>
               {dancers
                  .filter(dancer => (!Object.values(selectedDancers).includes(dancer.id.toString()) || selectedDancers[position] === dancer.id.toString()))
                  .map(dancer => (
                     <SelectItem
                        key={dancer.id.toString()}
                        value={dancer.id.toString()}
                     >{Object.values(dancer).join(', ')}</SelectItem>
                ))}
                <SelectItem key='blank' value='none'>None</SelectItem>
              </SelectContent>
           </Select>
        </FormItem>
     )}
/>

y aquí está el controlador onValueChange:

function onSelectDancer(field: any, dancerId: string) {
    field.onChange(dancerId);
    setSelectedDancers({...selectedDancers, [field.name]: dancerId})
}

Incluso he logrado localizar el componente anidado que contiene el valor del ítem mostrado (SelectProvider - como se muestra en la captura de pantalla de ReactDevTools), pero no tengo idea de cómo borrarlo... Captura de pantalla de ReactDevTools mostrando el componente SelectProvider

Aquí está todo el componente del formulario: https://github.com/emdoem/hatful-of-pears/blob/master/components/ScoreInput.tsx

Respuesta #1

Tal vez pueda funcionar

Agregar la función de reinicio de React Hook Form

reset({
   selectFieldName: undefined
})

Respuesta #2

Para restablecer solo ciertos campos (como un input con name="user" y "email") haz lo siguiente:

form.reset({user: "", email: ""})

Artículos relacionados