Core-UI React CMultiSelect reset not working - reactjs

Question

I am trying to reset Core UI ReactJS CMultiSelect component with Reset button. I have used setState method to reset the value. As soon as I click on the reset button, the state value changes, but immediately onChange method of CMultiSelect is called and the existing value is retained.
Below is the code snippet I'm trying.
import React from 'react'
import { CRow, CMultiSelect, CFormInput, CButton } from '#coreui/react-pro'
class TestForm extends React.Component<{}, { textVal: string; dropdownVal: string[] }> {
constructor(props: any) {
super(props)
this.state = { textVal: '123', dropdownVal: [] }
}
setTextVal(newVal: string) {
this.setState({ textVal: newVal })
}
setTest(newVal: string[]) {
this.setState({ dropdownVal: newVal })
}
render() {
return (
<div className="row m-5">
<div className="col-sm-6">
<CFormInput
type="text"
value={this.state.textVal}
onChange={(evt) => {
this.setTextVal(evt.target.value)
}}
></CFormInput>
</div>
<div className="col-sm-6">
<CMultiSelect
multiple={false}
options={[
{
value: '1',
text: '1',
selected: this.state.dropdownVal.indexOf('1') >= 0,
},
{
value: '2',
text: '2',
selected: this.state.dropdownVal.indexOf('2') >= 0,
},
{
value: '3',
text: '3',
selected: this.state.dropdownVal.indexOf('3') >= 0,
},
]}
onChange={(val) => {
console.log('on change called', val)
this.setTest(
val.map((x) => {
return x.value.toString()
}),
)
}}
></CMultiSelect>
</div>
<div className="col-sm-6">
<CButton
className="mt-3"
type="reset"
value="Reset"
onClick={() => {
this.setTest([])
this.setTextVal('')
}}
>
Reset
</CButton>
</div>
</div>
)
}
}
export default TestForm
When I hit the reset button, value of the text field resets, but not the multi-select dropdown.

Answer 1

try calling the reset method on the component instance. You can do this by saving a reference to the CMultiSelect instance in your component's state, and then calling the reset method on that instance in your reset handler.
class MyComponent extends React.Component {
state = {
select: null,
};
handleReset = () => {
this.state.select.reset();
}
render() {
return (
<div>
<CMultiSelect
ref={(select) => this.setState({ select })}
onChange={this.handleChange}
/>
<button onClick={this.handleReset}>Reset</button>
</div>
);
}
}