How to reset a FluentUI Dropdown selection on a change somewhere else?

Question

I'm using a FluentUI dropdown in a reactjs office addin and would like for it to be reset when the user types in a completely different textbox. Can I get a reference to the dropdown and call some reset function?

It's a plain single-select dropdown like:

return <Dropdown
            placeholder={"Pick a thing"}
            label={"Things"}
            options={ thingOptions }
            onChange={ handleSelectThing }
       >

I saw https://github.com/microsoft/fluentui/issues/5917 but it doesn't quite seem to be the same thing.

Answer 1

I'm not thinking reactively enough. The solution was quite simple when it came down to it:

this.state = {
    // other state,
    selectedThing: undefined
}
const selectedThingKey =
      thingOptions.reduce(
        (acc, elt, index) => {
          return acc || (this.state.selectedThing === index && elt.key)
        },
        false);
return <Dropdown
        options={ thingOptions }
        onChange={ (ev,op,i) => {
            this.setState({selectedThing: i});
            return handleSelectThing(ev, op, i);
          }
        }
        selectedKey={ selectedThingKey }
        notifyOnReselect={true}
     />