How to clear react-select values on button click without adding it to options?

Question

I am using react-select and I want to clear the selected value on button click without adding it to the options property

I have tried

Using state to manipulate the options property , but Apparently on calling clearValue() method, automatically pushes to the options array by default.

Problem

How do I tell react-select to just clear the selected values and not add it in the options array anywhere ?

import React, { useRef } from "react";
import Select from "react-select";

export default function App() {
  const selectInputRef = useRef();

  const onClear = () => {
    selectInputRef.current.select.clearValue();
  };

  return (
    <div className="App">
      <h1>Select Gender</h1>
      <Select
        isMulti
        ref={selectInputRef}
        options={[
          { value: "male", label: "Male" },
          { value: "female", label: "Female" }
        ]}
      />
      <button onClick={onClear}>Clear Value</button>
    </div>
  );
}

Here is my CodeSandbox Link

In other words: You want to remove the currently selected value from the options alltogether? — trixn
– trixn, Commented Feb 18, 2021 at 8:34
@trixn yes that is what i want .. ideally it should be a function call .. so for ex I can remove those options on save — Ali
– Ali, Commented Feb 18, 2021 at 8:38
In that case you need to manage the options in component state and remove it, when the button is clicked. — trixn
– trixn, Commented Feb 18, 2021 at 8:38
@trixn I don't want react-select to change it's default behaviour of re adding elements.. i Just want to do it on a particular time i.e onButtonClick — Ali
– Ali, Commented Feb 18, 2021 at 8:39
@trixn I have already tried it in prod version of the code.. it doesnt work .. react-select automatically re adds them .. i would appreciate it if you would help me :( — Ali
– Ali, Commented Feb 18, 2021 at 8:40

trixn · Accepted Answer · 2021-02-18 09:29:23Z

4

You need to manage the state of the selected values and the options yourself and manipulate it accordingly:

export default function App() {
  const [selected, setSelected] = useState([]);
  const [options, setOptions] = useState([
    { value: "male", label: "Male" },
    { value: "female", label: "Female" }
  ]);

  const handleClear = () => {
    setOptions((currentOptions) => currentOptions.filter((currentOption) => !selected.includes(currentOption)));
    setSelected([]);
  };

  return (
    <div className="App">
      <h1>Select Gender</h1>
      <Select isMulti value={selected} options={options} onChange={setSelected} />
      <button onClick={handleClear}>Clear Value</button>
    </div>
  );
}

answered Feb 18, 2021 at 9:29

trixn

16.4k2 gold badges40 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

stellard · Accepted Answer · 2023-01-10 06:47:04Z

4

Why not just add isClearable prop as:

<Select
  isMulti
  value={selected}
  options={options}
  onChange={setSelected}
  isClearable
/>

edited Jan 10, 2023 at 6:47

stellard

5,3349 gold badges43 silver badges63 bronze badges

answered Dec 5, 2022 at 1:14

luoenzhen

591 bronze badge

Collectives™ on Stack Overflow

How to clear react-select values on button click without adding it to options?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related