How to clear the selection from dropdown (semantic-ui-react)


#1
"semantic-ui-react": "^0.67.2",
"semantic-ui": "^2.2.9"

I have the following dropdown module added to my React code:

<Dropdown placeholder='Select Account' search selection options={Statement.dropdownAccounts} onChange={this.handleSelectAccountDropdownChange} />

I want to clear the dropdown selection using a remote button

<Button primary onClick={this.clearSelection}>Clear Selection</Button>

I can see if I add “multiple” to the Dropdown module I can remove the selected item, BUT what if I want to limit the user to just 1 selection AND give them the opportunity to clear out the selection?

Right now my code takes care of the value state, so I can set and clear that fine. My problem is the displayed dropdown selection. All help is appreciated. I know in Semantic UI there’s a behavior called clear…essentially I’m looking for something similiar to that with Semantic UI React. Thanks in advance.


#3

I figured it out.

<Dropdown placeholder='Select Account' search selection options={Statement.dropdownAccounts} value={selectedAccount} onChange={this.handleDropdownChange} />

value is stored in my state.

this.state = {
  selectedAccount: "",
};

My button:

<Button primary onClick={this.clearSelection}>Clear Selection</Button>

is linked to ClearSelection:

  clearSelection = () => {
    console.log("Hit clear");
    this.setState ({
      selectedAccount: "",
    });
  };