reactjsoffice-ui-fabricoffice-fabric

Office UI Fabric React - Dropdown not respecting selectedKey prop

I have this code:

<Dropdown
      selectedKey={someKeyInState}
      onChange={(e,option) => {
         // check if the dropdown should be updated
        if(someCondition){
           // update selected key
        }
        else {
           // don't update selected key
        }
      }}
      options={someOptions}
/>

I want to block updating the selected key if a certain condition is met.
But, Dropdown visually shows the option that I clicked on as selected.
How do I prevent this behavior?

Solution

  • The problem was my state for selectedKey was undefined it nothing is selected. When you pass in undefined you're basically saying to fabric to control the selectedKey state on it's own.

    I fixed by passing null instead of undefined. That made the Dropdown fully controlled.