CODEWITHSUNDEEP
javascriptreactjsmobx-reactoffice-ui-fabric
Nikola Sevo
Nikola Sevo

Reputation: 285

Clearing dropdown selection office-ui-fabric react component

Im having problem clearing selections in dropdown list. I sometime have to clear the selection of a dropdown since the options population changes. If a new options length is lesser than the previous one then the selection points outside the range giving error.

Simple example: (See: [https://developer.microsoft.com/en-us/fabric#Variants][1])

<Dropdown
              selectedKey={ selectedItem && selectedItem.key }
              onChanged={ item => this.setState({selectedItem: item}) }
              options={
                [
                  { key: 'A', text: 'Option a' },
                  { key: 'B', text: 'Option b' },
                ]
              }
/>

The only thing I can think of is that maybe controlling selectedKey, ie setting selectedItem.key to null/undefined to clear it but Im not getting any luck with that solution..

Upvotes: 1

Views: 5221

Answers (1)

Nikola Sevo
Nikola Sevo

Reputation: 285

The problem I had was that I did not change my options and the selected id at the same time. What I did was that I associate each dropdown with an object:

// ...async call .then( (newFruits) => ...
this.fruits = {
  selectedId: null,
  options: ['My','newly', 'fetched','fruits','array']
};

...where fruits would be your observable Array.

<Dropdown
    selectedKey={ fruits && fruits.selectedId }
    onChanged={ this.myFuncThatCallsApiWithNewId }
    options={fruits.options}
/>

Upvotes: 3

Related Questions