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.
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
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:
inside useEffect:
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