React-select: need to clear value of react-select after change in value of another react-select

[aliasgar-choolawala]

is it possible to clear the selected value of the react-select after change in value of another react select?
Basically, i want to perform the action that "Clear value" performs in react select

[jmz7v]

This is not really a concern of react-select but of the implementation, you should have a way to detect that the value on select-a has changed, then update the value on select-b.

The easiest way to achieve this is to store the values of both selects on a common parent component, on the React docs you can find this technique called lifting state up: https://reactjs.org/docs/lifting-state-up.html

[MasterSlowPoke]

I actually was having a little problem with this, but figured it out trying to document it.

I have two Select components, with the following options:

selectOneOptions = [
  { value: 'a', label: 'option a' },
  { value: 'b', label: 'option b' },
  { value: 'c', label: 'option c' },
]
selectTwoOptions = [
  { value: 'd', label: 'only with a or c' }
]

I have an onChange that detects when either option is changed. If A or C are selected in the first select, it selects option D in the second select. If option B is selected in the first select, the second select's value is set to undefined. If the second select's value is set to D, then A is selected in the first select.

The first two cases work perfectly. The last case, however, initially works, and A is selected. However, if I then choose B on the first select, the second select is passed undefined but the option is still visible on the select itself.

The problem was that I was passing undefined into the select's value instead of null. I'm pretty new at real JS so I didn't realize there was a difference. If you want to clear the other select, be sure to use null.

[aliasgar-choolawala]

@jmz7v thanks for your inputs.
Actually, i have already tried setting state of second react-select box(Component B) by passing the value in the props from the parent component, and setting the value in the state of Component B.

I am clearing the value in componentWillReceiveProps of Component B(by setting it as null), as soon as the value of react-select(Component A) changes.

The issue is that the value in Component B remains "empty", even after i select a new value.

[aliasgar-choolawala]

Basically, i want to clear the value of the react select box, before loadOptions method is called...

[MasterSlowPoke]

If I had to guess, I think you're accidentally clearing Component B every state update, and not just when you select something in Component A.

Can you post some code?

[aliasgar-choolawala]

@MasterSlowPoke , here's the code
ref="docList"
key={speciality}
multi={this.state.multi}
value={this.state.value}
onChange={this.onChange}
valueKey="value"
labelKey="label"
loadOptions={this.getDoctors}
backspaceRemoves={this.state.backspaceRemoves}
onValueClick={this.getDoctorDetails}
/>

I want to set value of this Select.Async as empty after Speciality(of doctor) is either cleared or changed.
I am getting the value of that speciality as a prop and setting as state here:

componentWillReceiveProps(nextProps) {
if(nextProps.specialitySelected){
this.setState({speciality: nextProps.specialitySelected});
}
else{
this.setState({speciality: null});
}
}

And, the Select.Async is repopulated everytime speciality value is modified/cleared.
I want to clear the value of the Select.Async everytime "speciality" value is modified/cleared.

I tried doing setting value state as empty in getDoctors method, but it shows value as empty even after i Choose from dropdown in first time.

[aliasgar-choolawala]

@MasterSlowPoke, @jmz7v
i solved the issue by setting state of second react-select using redux store

[odiyan]

Hi,

I am facing a similar issue. I would like the value in the second dropdown to clear when the value in the first dropdown changes. But the previous value of the second dropdown still shows even though on expanding the dropdown, I can see that new values have been populated. If you would like to see some code :

import React from 'react';
import Select from 'react-select';
import axios from 'axios';    

class KeydateDropdown extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            optionList: []
        };
    };

    componentDidUpdate(prevProps) {
        let vesselname = this.props.vesselname;
        if (prevProps.vesselname !== vesselname) {
            let keydateList = [];
            this.setState({
                optionList: keydateList
            });
            axios.get('list-keydates', {
                params: {
                    vesselname: vesselname
                }
            })
                .then((response) => {
                    let data = response.data['intervention'];
                    data.forEach((element) => {
                        keydateList.push({ value: element, label: element });
                    });
                    this.setState({ optionList: keydateList });
                })
        }
    }


    render() {

        return (
            <Select
                isDisabled={this.props.isDisabled}
                onChange={this.props.handleKeydateChange}
                options={this.state.optionList}
                className={styles.dropdown}
            />
        );
    }

}

export default KeydateDropdown;

[aiji42]

I worked around this problem by passing the key props to the react-select component that needs to be reset.

https://medium.com/@albertogasparin/forcing-state-reset-on-a-react-component-by-using-the-key-prop-14b36cd7448e