Dropdown control always set the selected index to 0 in _onFocus if the current selection isn't in the options

[marywang-office]

Environment Information

• Package version(s): (all versions)
• Browser and OS versions: (all browsers and OS)

Please provide a reproduction of the bug in a codepen:

We have a Dropdown control with 4 options. In some scenarios, when the Dropdown associated object doesn't have valid option and sets the initial selected index to 5. The Dropdown shows blank which means nothing is selected, which is the correct behavior. But when user sets focus on it, the selected value changes to index 0 (this._moveIndex). This is incorrect as user hasn't actually changed it yet.

office-ui-fabric-react/src/components/Dropdown/Dropdown.base.tsx:

private _onFocus = (ev: React.FocusEvent): void => { const { isOpen, selectedIndices, hasFocus } = this.state; const { multiSelect, openOnKeyboardFocus } = this.props;

const disabled = this._isDisabled();

if (!disabled) {
  if (!isOpen && selectedIndices.length === 0 && !multiSelect) {
    // Per aria
    this._moveIndex(ev, 1, 0, -1);
  }

Actual behavior:

The dropdown selection changed to index 0 when the control has focus.

Expected behavior:

The dropdown selection stays same, which means no valid option is selected.

Priorities and help requested:

High Are you willing to submit a PR to fix? (Yes, No) Yes Requested priority: (Blocking, High, Normal, Low) High Products/sites affected: (if applicable)

[kenotron]

@marywang-office - since you have indicated that you're willing to submit a PR to fix, feel free to do so. I would advise to get in touch with the code owner before doing much of this work: @joschect.

It would also be very helpful to have this wrapped up in a codepen so that we can target a fix ASAP & to illustrate the issue (and verify a fix)

[msft-github-bot]

This issue has been automatically marked as stale because it has marked as requiring author feedback but has not had any activity for 4 days. It will be closed if no further activity occurs within 3 days of this comment. Thank you for your contributions to Fabric React!

[marywang-office]

We’re fixing this in the back end so that there is no invalid selection for all our scenarios. I’m fine with not fixing the UI.