I've a problem about Chakra UI's select component. It's somehow doesn't reset their value. Also, when I press the button, Select component doesn't render with new value
https://codesandbox.io/s/compassionate-shockley-f9chz?file=/src/app.tsx:518-863
export const App = (): JSX.Element => {
const [value, setValue] = React.useState("in");
const onClick = () => {
setValue(null);
};
console.log("App value", value);
return (
<div>
<Select options={selectionOptions} value={value} />
<Button onClick={onClick}> click </Button>
</div>
);
};
const [value, setValue] = useState(propValue);
useEffect(() => {
if (handleChange) {
handleChange(value);
}
}, [handleChange, value, setValue]);
<Select
{...rest}
value={value}
onChange={(event) => {
setValue(event?.target?.value);
}}
>
{options.map(({ value: currentValue, name }, index) => (
<option key={index} value={currentValue}>
{name}
</option>
))}
</Select>
Bumped into the exact problem. I fixed it by resetting the value with setValue("") instead of setValue(null).