I've a problem about Chakra UI's select ponent. It's somehow doesn't reset their value. Also, when I press the button, Select ponent doesn't render with new value

=/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>

I've a problem about Chakra UI's select ponent. It's somehow doesn't reset their value. Also, when I press the button, Select ponent doesn't render with new value

https://codesandbox.io/s/passionate-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>

• javascript
• reactjs
• react-select
• chakra-ui

Share Improve this question Follow edited Feb 11, 2022 at 12:41 yasin asked Feb 11, 2022 at 12:35 yasinyasin 14122 silver badges99 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

Bumped into the exact problem. I fixed it by resetting the value with setValue("") instead of setValue(null).