How to Reset ShadCN UI Select with react-hook-form

Introduction

When working with ShadCN UI Select components in combination with react-hook-form, you might encounter an issue where the Select component doesn’t visually reset even though the form state resets. This guide explores why this happens and provides practical solutions to ensure your Select fields reset correctly when the form resets.

Why Doesn't ShadCN UI Select Reset?

The root cause lies in how ShadCN UI manages internal state. The Select component keeps its own value state in addition to the form's state. While react-hook-form updates its state when form.reset() is called, ShadCN UI's Select doesn’t automatically sync with these updates.

Key Challenges:

1. The visual value of the Select component remains unchanged.
2. Synchronizing the internal state of the Select with the form state.

The Solution

To reset ShadCN UI Select fields, you need to:

1. Control the Select value explicitly via React state or React Hook Form.
2. Trigger updates to the Select component's value when the form resets.

Step-by-Step Implementation

1. Update the Select Value Dynamically

Use a controlled component approach to link the Select’s value directly with React Hook Form’s state.

import { useEffect, useState } from 'react'
import { useForm } from 'react-hook-form'
import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from 'shadcn-ui/select'
import { Button } from 'shadcn-ui/button'

const FormWithReset = () => {
  const { control, handleSubmit, reset, watch } = useForm({
    defaultValues: {
      selectField: '',
    },
  })

  const [selectedValue, setSelectedValue] = useState('')

  // Sync Select value with form state
  const watchedValue = watch('selectField')
  useEffect(() => {
    setSelectedValue(watchedValue)
  }, [watchedValue])

  const onSubmit = (data: any) => {
    console.log(data)
    reset()
  }

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <Select value={selectedValue} onValueChange={(value) => setSelectedValue(value)}>
        <SelectTrigger>
          <SelectValue placeholder="Select an option" />
        </SelectTrigger>
        <SelectContent>
          <SelectItem value="option1">Option 1</SelectItem>
          <SelectItem value="option2">Option 2</SelectItem>
          <SelectItem value="option3">Option 3</SelectItem>
        </SelectContent>
      </Select>

      <Button type="submit">Submit</Button>
      <Button
        type="button"
        onClick={() => reset({ selectField: '' })} // Reset form and Select
      >
        Reset
      </Button>
    </form>
  )
}

export default FormWithReset

2. Reset with React Hook Form's form.reset()

The reset method updates the form's state and triggers a re-render. By using the value prop in the Select component, the visual value resets when the form state changes.

3. Handle Dynamic Options

If your Select options are dynamic, ensure they’re included in the reset logic:

useEffect(() => {
  reset({
    selectField: '',
    otherField: 'defaultValue',
  })
}, [options])

Key Points:

• Ensure the value prop of Select is always in sync with the form state.
• Trigger a re-render of the Select component when the form resets.

Common Issues and Fixes

1. Select Doesn't Reset

• Cause: The Select component’s internal state is independent of the form state.
• Fix: Use the value prop to control the Select value explicitly.

2. Dynamic Default Values

• Cause: Options are loaded asynchronously or change dynamically.
• Fix: Update the form’s default values when options change.

useEffect(() => {
  reset({
    selectField: dynamicDefaultValue,
  })
}, [dynamicDefaultValue])

Conclusion

By explicitly controlling the Select value and syncing it with react-hook-form, you can ensure a seamless user experience where all form fields reset correctly. ShadCN UI's powerful components, combined with React Hook Form's state management, allow for robust and flexible form handling.