Dropdown selected option not updated after value property changes

[leandrohsilveira]

If the Dropdown component prop "value" changes without an user selection event, a form reset event for example, the selected option will not visually update to match the new "value" property.

So, the controller value changed, but the visible component didn't.

class SampleForm extends React.Component {

    constructor(props) {
        super(props)
        this.state = {
            gender: props.gender || ''
        };
        this.handleFormReset = this.handleFormReset.bind(this);
        this.handleGenderChange = this.handleGenderChange.bind(this);
    }

    handleGenderChange(e) {
        this.setState({gender: e.value});
    }

    handleFormReset(e) {
        this.setState({gender: this.props.gender || ''});
    }

    render() {
        const genders = [
            {label: 'Male', value: 'M'},
            {label: 'Female', value: 'F'}
        ];
        return (
            <form onSubmit={() => this.props.onSubmit({gender: this.state.gender})} onReset={this.handleFormReset}>

                <Dropdown value={this.state.gender} options={genders} onChange={this.handleGenderChange} placeholder="Gender" />

                <button type="submit">Submit</button>
                <button type="reset">Reset</button>
            </form>
        )
    }

}

So, on form reset, the new value of state "gender" passed to Dropdown value property doesn't changes the Dropdown selected option.

[cagataycivici]

Replicated

[cagataycivici]

I've reimplemented Dropdown and this issue is fixed along the way now.