[BUG] - Setting the value of the controlled Select component does not work

rokukoo commented 2 hours ago

NextUI Version

2.4.8

Describe the bug

Originally, I was using react-hook-form to manage the Select component, but I found that if I directly used from.setValue() to set the value of the Select, the Select component would not show the item selected.

Through react devtools, I found that the value prop of the Select component was indeed modified, but it did not show that the item was selected, and when submitting the form, it still prompted that the Select was empty. In addition, I found that state.selectedKeys in HiddenSelect was also empty.

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

Here is a simple example that can reproduce the bug

Define a state to control the value of Select
```
const [value, setValue] = useState("");
```

Use the Select component as follows

<Button onPress={() => setValue(1)}>1</Button>
<Select
label="Region"
value={value}
items={[
{ id: 1, name: "a" },
{ id: 2, name: "b" },
{ id: 3, name: "c" },
]}
>
{(item: { id: number; name: string }) => (
<SelectItem key={item.id}>{item.name}</SelectItem>
)}
</Select>

Click the button, theoretically the value of Select will be modified, and the selection box will show that it is selected.

Expected behavior

Theoretically the value of Select will be modified, and the selection box will show that it is selected.

Screenshots or Videos

After clicking the button, the value of Select does change, but the Select component does not show that it is selected. 647025c46af7cc7b895a6903dc99197e 8fe48f7ee157dd89a615ea8fc19803e3 fab8b3e4141a2830f2fb408686f28f01 23552de5f0884b496af85a9a709511f8