Clearing dropdown selection office-ui-fabric react component

Question

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..

Yes sorry, ill post a more thurough answer in an hour or so. Just make sure that your key is Null and the options is changed both before a render. My problem was my mix and/or lack of knowledge of mobx and how it triggered rendering. — Nikola Sevo

Nikola Sevo Nikola Sevo · Accepted Answer · 2017-12-06T13:09:55

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}
/>

Clearing dropdown selection office-ui-fabric react component

1 Answers