Controlled Dropdown component does not clear selection when value is undefined #3625
Description
Bug Report
When using a Dropdown component setting value to undefined does not clear the dropdown menu.
Steps
import React, { Component } from "react";
import { render } from "react-dom";
import { Dropdown } from "semantic-ui-react";
const options = [
{
key: 1,
text: 1,
value: 1
},
{
key: 2,
text: 2,
value: 2
}
];
class DropdownExample extends Component {
state = {
selection: undefined
};
selectOption = (event, data) => {
this.setState({
selection: data.value
});
};
clearOption = () => {
this.setState({
selection: undefined
});
};
render() {
return (
<div style={{ padding: "10px" }}>
<div>
<Dropdown
options={options}
selection
search
onChange={this.selectOption}
/>
<button onClick={() => this.clearOption()}>Clear</button>
</div>
<div>{`selection: ${this.state.selection}`}</div>
</div>
);
}
}
render(<DropdownExample />, document.getElementById("root"));1.) Mount the component
2.) Select one of the options
3.) Click the Clear button
(can be reproduced in the codesandbox linked below)
Expected Result
Clicking the button should default to an empty selection (the same thing that happens when the Component is first mounted).
Actual Result
The previously selected value is still rendered as dropdown text.
Version
"semantic-ui-react": "0.84.0",