[BUG] - Issue with Autocomplete Component Not Reflecting React Hook Form's Reset

[dscarv27]

NextUI Version

2.4.8"

Describe the bug

I'm currently using the NextUI Autocomplete component in a form that handles both creating and updating entries. The form utilizes react-hook-form with Controller, and I’m using useForm’s reset function to prepopulate the form fields when updating existing data. However, I’m facing an issue where the Autocomplete component doesn’t display the preloaded data from reset on the interface as expected.

Here’s the relevant codes snippet:

  const {
    reset,
    register,
    handleSubmit,
    control,
    formState: { errors, isSubmitting },
  } = useForm<UpdateStudentFormSchema>({
    resolver: zodResolver(updateStudentFormSchema),
  });

inside useEffect:

          setStudent(foundStudent);
          reset({
            ...foundStudent,
          });

<Controller
  name="icd_id"
  control={control}
  render={({ field }) => {
    return (
      <Autocomplete
        label="CID (if available)"
        className="w-[824px]"
        selectedKey={field.value}
      >
        {icds.map((ICD) => (
          <AutocompleteItem key={ICD.value} value={ICD.value}>
            {ICD.label}
          </AutocompleteItem>
        ))}
      </Autocomplete>
    );
  }}
/>

Despite calling reset with pre-existing data, the Autocomplete component does not visually reflect the selectedKey. Despite calling reset with pre-existing data, the Autocomplete component does not visually reflect the selectedKey. Is there a specific approach required for this component (and others like Select and DatePicker) to work with react-hook-form's reset, or any workaround to ensure the preloaded values display correctly?

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

Steps to Reproduce the Issue

Set up the form: Create a form using react-hook-form with a Controller to manage an Autocomplete component from NextUI. Also, include other components like Select or DatePicker if relevant.

Initialize the form with data: Use the useForm hook’s reset function to populate the form with existing data, such as updating an entry.

Trigger the reset function: Call reset with a predefined data object to set initial values in the form fields, including the Autocomplete.

Observe the component: After calling reset, check if the Autocomplete displays the preloaded data (for example, the selectedKey value). Notice whether the preloaded data appears in the component interface.

Expected behavior

As a user, I expected see the information at the form component, but i'm not seeing

Screenshots or Videos

No response

Operating System Version

Windows

Browser

Edge

[linear]

ENG-1527 [BUG] - Issue with Autocomplete Component Not Reflecting React Hook Form's Reset

[wingkwong]

1. the linear link is for us to mention the issue. you can simply ignore it.
2. please provide a minimal reproducible sandbox instead of just code snippets. this could help us to investigate faster.