How to clear the select fields externally?

[hermbo]

Hey there I am using the react-select as part of my search form. I'd like to be able to clear the select fields in a simple function once I reset the form using a reset input field. Could someone show me how to do this? Thanks!

handleReset = () => {
   // code
}

<form onReset={this.handleReset}>
   <Select options={options} />
   <Select options={options2} />
   <input type="reset" value="Reset" />
</form>

[ebonow]

Greetings @hermbo ,

There are two ways to clear the Select.

1. Make it a controlled input and pass null as the value.

const [ value1, setValue1 ] = useState();
const [ value2, setValue2 ] = useState();

handleReset = () => {
  setValue1(null);
  setValue2(null);
}

<form onReset={this.handleReset}>
   <Select onChange={opt => setValue1(opt)} value={value1} options={options} />
   <Select onChange={opt => setValue2(opt)} value={value2} options={options2} />
   <input type="reset" value="Reset" />
</form>

2. Create a ref and access the internal method.

const select1Ref = useRef();
const select2Ref = useRef();

handleReset = () => {
  select1Ref.current.select.clearValue();
  select2Ref.current.select.clearValue();
}

<form onReset={this.handleReset}>
   <Select ref={select1Ref} options={options} />
   <Select ref={select2Ref} options={options2} />
   <input type="reset" value="Reset" />
</form>

[hermbo]

Thanks @ebonow I like example two and will give it a try.

[EligibleDev]

@ebonow Mine was giving error while trying out the second method but when I did problemsRef.current.clearValue(); it was fine. I think there is no select veriable...