Dropdown component selectedKey not working in version 4.32.0

[yangsiyu007]

Bug Report

• Package version(s): 4.32.0
• Browser and OS versions: Chrome Version 60.0.3112.113, Mac OS 10.12.6

Priorities and help requested (not applicable if asking question):

Are you willing to submit a PR to fix? No

Requested priority: Low

Products/sites affected: N/A - lowering the version to 4.21.3 worked fine

Describe the issue:

Using version 4.32.0, the Dropdown component will not update the selected item correctly when used as a control element - the key passed to the selectedKey parameter is not respected.

Actual behavior:

When selecting items more than once after initial render, the item displayed is not the one selected but some previously selected item.

Expected behavior:

Dropdown to display the most recently selected item.

If applicable, please provide a codepen repro:

[DennisKuhn]

I can confirm this:

• onChanged is called with the correct selected item
• then through setState and selectedKey={ this.state.comboKey } the correct key is set. I've used title={ this.state.comboKey } and it shows the correct item
• when adding a onRenderTitle handler, it is called with the old? selected item

As stated by @yangsiyu007 it changes the item once correctly, sometimes more often for me. I created a fresh HelloWorld with just the ComboBox and CheckBox and same issue. title and selectedKey are set to the same Phone:

[DennisKuhn]

It is because the index of the "newly" selected item is found by searching for an item that is selected or matches the key. If a previously selected item is found before the selectedKey the previous is returned.

To reproduce/test it:

1. options: a, b, c
2. select: c -> ok
3. select: b: -> ok
4. select a: - ok
5. select b: -> Still a

For me, it fixed it to remove the check for selected, but I think it jeopardise the multi-select feature.

Dropdown.prototype._getSelectedIndex = function (options, selectedKey) {
        return Utilities_1.findIndex(options, (function (option) { return ((selectedKey != null) && option.key === selectedKey); }));
        // return Utilities_1.findIndex(options, (function (option) { return (option.isSelected || option.selected || (selectedKey != null) && option.key === selectedKey); }));
    };

[enriquin]

It seems being the same as: https://github.com/OfficeDev/office-ui-fabric-react/pull/2537 and https://github.com/OfficeDev/office-ui-fabric-react/issues/2422 Dropdown mutates the props being passed to it. Have you tried upgrading?

[DennisKuhn]

I can't, or don't know, upgrade because I use it through SPFx. I use yo @microsoft/sharepoint to make a skeleton for my webpart and then go from there. Seems to me to be the same issue.

[micahgodbolt]

Yeah, this bug came in when multiSelect was implemented. It was fixed a few weeks ago.

The yeoman generator should have created a package.json with an entry for office-ui-fabric-react. You can update it there.

If that causes trouble with SPFx, then this issue should be about fixing SPFx to use the newest Fabric.

[DennisKuhn]

Thanks for your reply @micahgodbolt . The package.json contains an entry for @microsoft/sp-webpart-base, currently 1.2.0, that includes the office-ui-fabric-react:

> npm ls office-ui-fabric-react
`-- @microsoft/sp-webpart-base@1.2.0
  `-- office-ui-fabric-react@4.32.0

I guess it's about waiting for an sp-web-part-base update then.