Dropdown: do not select first option automatically unless it's select…

…ed using keyboard navigation (#10755)

* do not select first option by default for non-aria case

* update snapshots

* code cleanup

* yarn change

* add Aria doc link inline

* resolve comment

* simplify to use one class vars rather than two

* resolve comments

change/office-ui-fabric-react-2019-10-08-21-55-21-dropdown-fix.json

@@ -0,0 +1,9 @@
+{
+  "type": "patch",
+  "comment": "Fixed dropdown to not select first option automatically unless it's selected using keyboard navigation per aria",
+  "packageName": "office-ui-fabric-react",
+  "email": "xgao@microsoft.com",
+  "commit": "43f40feb7596224a82cecf98f48121567c883783",
+  "date": "2019-10-09T04:55:21.494Z",
+  "file": "/Users/xugao/Projects/office-ui-fabric-react/change/office-ui-fabric-react-2019-10-08-21-55-21-dropdown-fix.json"
+}

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

@@ -68,12 +68,10 @@ export class DropdownBase extends React.Component<IDropdownInternalProps, IDropd
   private _sizePosCache: DropdownSizePosCache = new DropdownSizePosCache();
   private _classNames: IProcessedStyleSet<IDropdownStyles>;
   private _requestAnimationFrame = safeRequestAnimationFrame(this);
-
   /** Flag for when we get the first mouseMove */
   private _gotMouseMove: boolean;
-
-  /** Flag for identifiying dropdown is opened by getting focus using keyboard */
-  private _isOpenedByKeyboardFocus: boolean;
+  /** Flag for tracking whether focus is triggered by click (alternatively triggered by keyboard nav) */
+  private _isFocusedByClick: boolean;
 
   constructor(props: IDropdownProps) {
     super(props);
@@ -279,6 +277,7 @@ export class DropdownBase extends React.Component<IDropdownInternalProps, IDropd
               onKeyDown={this._onDropdownKeyDown}
               onKeyUp={this._onDropdownKeyUp}
               onClick={this._onDropdownClick}
+              onMouseDown={this._onDropdownMouseDown}
               onFocus={this._onFocus}
             >
               <span
@@ -1036,33 +1035,36 @@ export class DropdownBase extends React.Component<IDropdownInternalProps, IDropd
     const { isOpen } = this.state;
     const disabled = this._isDisabled();
 
-    if (!disabled && !(this._isOpenedByKeyboardFocus && isOpen)) {
+    if (!disabled && !this._shouldOpenOnFocus()) {
       this.setState({
         isOpen: !isOpen
       });
     }
 
-    this._isOpenedByKeyboardFocus = false;
+    this._isFocusedByClick = false; // reset
+  };
+
+  private _onDropdownMouseDown = (): void => {
+    this._isFocusedByClick = true;
   };
 
   private _onFocus = (ev: React.FocusEvent<HTMLDivElement>): void => {
-    const { isOpen, selectedIndices, hasFocus } = this.state;
-    const { multiSelect, openOnKeyboardFocus } = this.props;
+    const { isOpen, selectedIndices } = this.state;
+    const { multiSelect } = this.props;
 
     const disabled = this._isDisabled();
 
     if (!disabled) {
-      if (!isOpen && selectedIndices.length === 0 && !multiSelect) {
-        // Per aria
+      if (!this._isFocusedByClick && !isOpen && selectedIndices.length === 0 && !multiSelect) {
+        // Per aria: https://www.w3.org/TR/wai-aria-practices-1.1/#listbox_kbd_interaction
         this._moveIndex(ev, 1, 0, -1);
       }
       if (this.props.onFocus) {
         this.props.onFocus(ev);
       }
       const state: Pick<IDropdownState, 'hasFocus'> | Pick<IDropdownState, 'hasFocus' | 'isOpen'> = { hasFocus: true };
-      if (openOnKeyboardFocus && !hasFocus) {
+      if (this._shouldOpenOnFocus()) {
         (state as Pick<IDropdownState, 'hasFocus' | 'isOpen'>).isOpen = true;
-        this._isOpenedByKeyboardFocus = true;
       }
 
       this.setState(state);
@@ -1106,4 +1108,14 @@ export class DropdownBase extends React.Component<IDropdownInternalProps, IDropd
       </Label>
     ) : null;
   };
+
+  /**
+   * Returns true if dropdown should set to open on focus.
+   * Otherwise, isOpen state should be toggled on click
+   */
+  private _shouldOpenOnFocus(): boolean {
+    const { hasFocus } = this.state;
+    const { openOnKeyboardFocus } = this.props;
+    return !this._isFocusedByClick && openOnKeyboardFocus === true && !hasFocus;
+  }
 }

packages/office-ui-fabric-react/src/components/Dropdown/Dropdown.test.tsx

@@ -349,8 +349,9 @@ describe('Dropdown', () => {
     });
 
     it('opens on click if openOnKeyboardFocus is true', () => {
-      wrapper = mount(<Dropdown openOnKeyboardFocus={true} label="testgroup" options={DEFAULT_OPTIONS} />);
+      wrapper = mount(<Dropdown openOnKeyboardFocus label="testgroup" options={DEFAULT_OPTIONS} />);
 
+      wrapper.find('.ms-Dropdown').simulate('mousedown');
       wrapper.find('.ms-Dropdown').simulate('click');
 
       const secondItemElement = document.querySelector('.ms-Dropdown-item[data-index="2"]') as HTMLElement;

packages/office-ui-fabric-react/src/components/Dropdown/__snapshots__/Dropdown.test.tsx.snap

@@ -99,6 +99,7 @@ exports[`Dropdown multi-select Renders multiselect Dropdown correctly 1`] = `
     onFocus={[Function]}
     onKeyDown={[Function]}
     onKeyUp={[Function]}
+    onMouseDown={[Function]}
     tabIndex={0}
   >
     <span
@@ -272,6 +273,7 @@ exports[`Dropdown single-select Renders single-select Dropdown correctly 1`] = `
     onFocus={[Function]}
     onKeyDown={[Function]}
     onKeyUp={[Function]}
+    onMouseDown={[Function]}
     role="listbox"
     tabIndex={0}
   >

packages/office-ui-fabric-react/src/components/__snapshots__/Callout.Cover.Example.tsx.shot

@@ -137,6 +137,7 @@ exports[`Component Examples renders Callout.Cover.Example.tsx correctly 1`] = `
         onFocus={[Function]}
         onKeyDown={[Function]}
         onKeyUp={[Function]}
+        onMouseDown={[Function]}
         role="listbox"
         tabIndex={0}
       >

packages/office-ui-fabric-react/src/components/__snapshots__/Callout.Directional.Example.tsx.shot

@@ -822,6 +822,7 @@ exports[`Component Examples renders Callout.Directional.Example.tsx correctly 1`
         onFocus={[Function]}
         onKeyDown={[Function]}
         onKeyUp={[Function]}
+        onMouseDown={[Function]}
         role="listbox"
         tabIndex={0}
       >

packages/office-ui-fabric-react/src/components/__snapshots__/ChoiceGroup.Custom.Example.tsx.shot

@@ -279,6 +279,7 @@ exports[`Component Examples renders ChoiceGroup.Custom.Example.tsx correctly 1`]
                 onFocus={[Function]}
                 onKeyDown={[Function]}
                 onKeyUp={[Function]}
+                onMouseDown={[Function]}
                 tabIndex={-1}
               >
                 <span

packages/office-ui-fabric-react/src/components/__snapshots__/Coachmark.Basic.Example.tsx.shot

@@ -139,6 +139,7 @@ exports[`Component Examples renders Coachmark.Basic.Example.tsx correctly 1`] =
         onFocus={[Function]}
         onKeyDown={[Function]}
         onKeyUp={[Function]}
+        onMouseDown={[Function]}
         role="listbox"
         tabIndex={0}
       >

packages/office-ui-fabric-react/src/components/__snapshots__/ContextualMenu.Directional.Example.tsx.shot

@@ -283,6 +283,7 @@ exports[`Component Examples renders ContextualMenu.Directional.Example.tsx corre
         onFocus={[Function]}
         onKeyDown={[Function]}
         onKeyUp={[Function]}
+        onMouseDown={[Function]}
         role="listbox"
         tabIndex={0}
       >

packages/office-ui-fabric-react/src/components/__snapshots__/DatePicker.Basic.Example.tsx.shot

@@ -339,6 +339,7 @@ exports[`Component Examples renders DatePicker.Basic.Example.tsx correctly 1`] =
       onFocus={[Function]}
       onKeyDown={[Function]}
       onKeyUp={[Function]}
+      onMouseDown={[Function]}
       role="listbox"
       tabIndex={0}
     >

packages/office-ui-fabric-react/src/components/__snapshots__/DatePicker.WeekNumbers.Example.tsx.shot

@@ -339,6 +339,7 @@ exports[`Component Examples renders DatePicker.WeekNumbers.Example.tsx correctly
       onFocus={[Function]}
       onKeyDown={[Function]}
       onKeyUp={[Function]}
+      onMouseDown={[Function]}
       role="listbox"
       tabIndex={0}
     >

packages/office-ui-fabric-react/src/components/__snapshots__/Dropdown.Basic.Example.tsx.shot

@@ -152,6 +152,7 @@ exports[`Component Examples renders Dropdown.Basic.Example.tsx correctly 1`] = `
       onFocus={[Function]}
       onKeyDown={[Function]}
       onKeyUp={[Function]}
+      onMouseDown={[Function]}
       role="listbox"
       tabIndex={0}
     >
@@ -346,6 +347,7 @@ exports[`Component Examples renders Dropdown.Basic.Example.tsx correctly 1`] = `
       onFocus={[Function]}
       onKeyDown={[Function]}
       onKeyUp={[Function]}
+      onMouseDown={[Function]}
       tabIndex={-1}
     >
       <span
@@ -559,6 +561,7 @@ exports[`Component Examples renders Dropdown.Basic.Example.tsx correctly 1`] = `
       onFocus={[Function]}
       onKeyDown={[Function]}
       onKeyUp={[Function]}
+      onMouseDown={[Function]}
       tabIndex={0}
     >
       <span

packages/office-ui-fabric-react/src/components/__snapshots__/Dropdown.Controlled.Example.tsx.shot

@@ -132,6 +132,7 @@ exports[`Component Examples renders Dropdown.Controlled.Example.tsx correctly 1`
     onFocus={[Function]}
     onKeyDown={[Function]}
     onKeyUp={[Function]}
+    onMouseDown={[Function]}
     role="listbox"
     tabIndex={0}
   >

packages/office-ui-fabric-react/src/components/__snapshots__/Dropdown.ControlledMulti.Example.tsx.shot

@@ -132,6 +132,7 @@ exports[`Component Examples renders Dropdown.ControlledMulti.Example.tsx correct
     onFocus={[Function]}
     onKeyDown={[Function]}
     onKeyUp={[Function]}
+    onMouseDown={[Function]}
     tabIndex={0}
   >
     <span

packages/office-ui-fabric-react/src/components/__snapshots__/Dropdown.Custom.Example.tsx.shot

@@ -152,6 +152,7 @@ exports[`Component Examples renders Dropdown.Custom.Example.tsx correctly 1`] =
       onFocus={[Function]}
       onKeyDown={[Function]}
       onKeyUp={[Function]}
+      onMouseDown={[Function]}
       role="listbox"
       tabIndex={0}
     >
@@ -515,6 +516,7 @@ exports[`Component Examples renders Dropdown.Custom.Example.tsx correctly 1`] =
       onFocus={[Function]}
       onKeyDown={[Function]}
       onKeyUp={[Function]}
+      onMouseDown={[Function]}
       role="listbox"
       tabIndex={0}
     >

packages/office-ui-fabric-react/src/components/__snapshots__/Dropdown.Error.Example.tsx.shot

@@ -324,6 +324,7 @@ exports[`Component Examples renders Dropdown.Error.Example.tsx correctly 1`] = `
       onFocus={[Function]}
       onKeyDown={[Function]}
       onKeyUp={[Function]}
+      onMouseDown={[Function]}
       role="listbox"
       tabIndex={0}
     >

packages/office-ui-fabric-react/src/components/__snapshots__/Dropdown.Required.Example.tsx.shot

@@ -182,6 +182,7 @@ exports[`Component Examples renders Dropdown.Required.Example.tsx correctly 1`]
         onFocus={[Function]}
         onKeyDown={[Function]}
         onKeyUp={[Function]}
+        onMouseDown={[Function]}
         role="listbox"
         tabIndex={0}
       >
@@ -502,6 +503,7 @@ exports[`Component Examples renders Dropdown.Required.Example.tsx correctly 1`]
       onFocus={[Function]}
       onKeyDown={[Function]}
       onKeyUp={[Function]}
+      onMouseDown={[Function]}
       role="listbox"
       tabIndex={0}
     >

packages/office-ui-fabric-react/src/components/__snapshots__/Facepile.Basic.Example.tsx.shot

@@ -860,6 +860,7 @@ exports[`Component Examples renders Facepile.Basic.Example.tsx correctly 1`] = `
         onFocus={[Function]}
         onKeyDown={[Function]}
         onKeyUp={[Function]}
+        onMouseDown={[Function]}
         role="listbox"
         tabIndex={0}
       >

packages/office-ui-fabric-react/src/components/__snapshots__/Facepile.Overflow.Example.tsx.shot

@@ -1058,6 +1058,7 @@ exports[`Component Examples renders Facepile.Overflow.Example.tsx correctly 1`]
         onFocus={[Function]}
         onKeyDown={[Function]}
         onKeyUp={[Function]}
+        onMouseDown={[Function]}
         role="listbox"
         tabIndex={0}
       >

packages/office-ui-fabric-react/src/components/__snapshots__/PeoplePicker.Types.Example.tsx.shot

@@ -230,6 +230,7 @@ exports[`Component Examples renders PeoplePicker.Types.Example.tsx correctly 1`]
         onFocus={[Function]}
         onKeyDown={[Function]}
         onKeyUp={[Function]}
+        onMouseDown={[Function]}
         role="listbox"
         tabIndex={0}
       >

packages/office-ui-fabric-react/src/components/__snapshots__/ResizeGroup.OverflowSet.Example.tsx.shot

@@ -4066,6 +4066,7 @@ exports[`Component Examples renders ResizeGroup.OverflowSet.Example.tsx correctl
           onFocus={[Function]}
           onKeyDown={[Function]}
           onKeyUp={[Function]}
+          onMouseDown={[Function]}
           role="listbox"
           tabIndex={0}
         >

packages/office-ui-fabric-react/src/components/__snapshots__/Stack.Horizontal.Configure.Example.tsx.shot

@@ -3122,6 +3122,7 @@ exports[`Component Examples renders Stack.Horizontal.Configure.Example.tsx corre
           onFocus={[Function]}
           onKeyDown={[Function]}
           onKeyUp={[Function]}
+          onMouseDown={[Function]}
           role="listbox"
           tabIndex={0}
         >
@@ -3347,6 +3348,7 @@ exports[`Component Examples renders Stack.Horizontal.Configure.Example.tsx corre
           onFocus={[Function]}
           onKeyDown={[Function]}
           onKeyUp={[Function]}
+          onMouseDown={[Function]}
           role="listbox"
           tabIndex={0}
         >

packages/office-ui-fabric-react/src/components/__snapshots__/Stack.Horizontal.WrapAdvanced.Example.tsx.shot

@@ -762,6 +762,7 @@ exports[`Component Examples renders Stack.Horizontal.WrapAdvanced.Example.tsx co
           onFocus={[Function]}
           onKeyDown={[Function]}
           onKeyUp={[Function]}
+          onMouseDown={[Function]}
           role="listbox"
           tabIndex={0}
         >
@@ -988,6 +989,7 @@ exports[`Component Examples renders Stack.Horizontal.WrapAdvanced.Example.tsx co
           onFocus={[Function]}
           onKeyDown={[Function]}
           onKeyUp={[Function]}
+          onMouseDown={[Function]}
           role="listbox"
           tabIndex={0}
         >
@@ -1214,6 +1216,7 @@ exports[`Component Examples renders Stack.Horizontal.WrapAdvanced.Example.tsx co
           onFocus={[Function]}
           onKeyDown={[Function]}
           onKeyUp={[Function]}
+          onMouseDown={[Function]}
           role="listbox"
           tabIndex={0}
         >

packages/office-ui-fabric-react/src/components/__snapshots__/Stack.Vertical.Configure.Example.tsx.shot

@@ -1833,6 +1833,7 @@ exports[`Component Examples renders Stack.Vertical.Configure.Example.tsx correct
                 onFocus={[Function]}
                 onKeyDown={[Function]}
                 onKeyUp={[Function]}
+                onMouseDown={[Function]}
                 role="listbox"
                 tabIndex={0}
               >
@@ -2059,6 +2060,7 @@ exports[`Component Examples renders Stack.Vertical.Configure.Example.tsx correct
                 onFocus={[Function]}
                 onKeyDown={[Function]}
                 onKeyUp={[Function]}
+                onMouseDown={[Function]}
                 role="listbox"
                 tabIndex={0}
               >

packages/office-ui-fabric-react/src/components/__snapshots__/Stack.Vertical.WrapAdvanced.Example.tsx.shot

@@ -762,6 +762,7 @@ exports[`Component Examples renders Stack.Vertical.WrapAdvanced.Example.tsx corr
           onFocus={[Function]}
           onKeyDown={[Function]}
           onKeyUp={[Function]}
+          onMouseDown={[Function]}
           role="listbox"
           tabIndex={0}
         >
@@ -988,6 +989,7 @@ exports[`Component Examples renders Stack.Vertical.WrapAdvanced.Example.tsx corr
           onFocus={[Function]}
           onKeyDown={[Function]}
           onKeyUp={[Function]}
+          onMouseDown={[Function]}
           role="listbox"
           tabIndex={0}
         >
@@ -1214,6 +1216,7 @@ exports[`Component Examples renders Stack.Vertical.WrapAdvanced.Example.tsx corr
           onFocus={[Function]}
           onKeyDown={[Function]}
           onKeyUp={[Function]}
+          onMouseDown={[Function]}
           role="listbox"
           tabIndex={0}
         >