[fixed] Dropdown focus behavior on click

By default, only focus the first dropdown menu item after keydown.

Author: taion

src/Dropdown.js

@@ -46,13 +46,13 @@ class Dropdown extends React.Component {
     }];
 
     this.state = {};
+
+    this.lastOpenEventType = null;
+    this.isKeyboardClick = false;
   }
 
   componentDidMount() {
-    let menu = this.refs.menu;
-    if (this.props.open && menu.focusNext) {
-      menu.focusNext();
-    }
+    this.focusNextOnOpen();
   }
 
   componentWillUpdate(nextProps) {
@@ -65,10 +65,8 @@ class Dropdown extends React.Component {
   }
 
   componentDidUpdate(prevProps) {
-    let menu = this.refs.menu;
-
-    if (this.props.open && !prevProps.open && menu.focusNext) {
-      menu.focusNext();
+    if (this.props.open && !prevProps.open) {
+      this.focusNextOnOpen();
     }
 
     if (!this.props.open && prevProps.open) {
@@ -105,9 +103,13 @@ class Dropdown extends React.Component {
     );
   }
 
-  toggleOpen() {
+  toggleOpen(eventType = null) {
     let open = !this.props.open;
 
+    if (open) {
+      this.lastOpenEventType = eventType;
+    }
+
     if (this.props.onToggle) {
       this.props.onToggle(open);
     }
@@ -118,29 +120,32 @@ class Dropdown extends React.Component {
       return;
     }
 
-    this.toggleOpen();
+    this.toggleOpen(this.isKeyboardClick ? 'keydown' : 'click');
+    this.isKeyboardClick = false;
   }
 
   handleKeyDown(event) {
-    let focusNext = () => {
-      if (this.refs.menu.focusNext) {
-        this.refs.menu.focusNext();
-      }
-    };
+    if (this.props.disabled) {
+      return;
+    }
 
     switch (event.keyCode) {
     case keycode.codes.down:
       if (!this.props.open) {
-        this.toggleOpen();
-      } else {
-        focusNext();
+        this.toggleOpen('keydown');
+      } else if (this.refs.menu.focusNext) {
+        this.refs.menu.focusNext();
       }
       event.preventDefault();
       break;
     case keycode.codes.esc:
     case keycode.codes.tab:
       this.handleClose(event);
       break;
+    case keycode.codes.space:
+    case keycode.codes.enter:
+      this.isKeyboardClick = true;
+      break;
     default:
     }
   }
@@ -153,6 +158,20 @@ class Dropdown extends React.Component {
     this.toggleOpen();
   }
 
+  focusNextOnOpen() {
+    const {menu} = this.refs;
+    if (!menu.focusNext) {
+      return;
+    }
+
+    if (
+      this.lastOpenEventType === 'keydown' ||
+      this.props.alwaysFocusNextOnOpen
+    ) {
+      menu.focusNext();
+    }
+  }
+
   focus() {
     let toggle = React.findDOMNode(this.refs[TOGGLE_REF]);
 
@@ -232,7 +251,8 @@ Dropdown.TOGGLE_ROLE = TOGGLE_ROLE;
 Dropdown.MENU_ROLE = MENU_ROLE;
 
 Dropdown.defaultProps = {
-  componentClass: ButtonGroup
+  componentClass: ButtonGroup,
+  alwaysFocusNextOnOpen: false
 };
 
 Dropdown.propTypes = {
@@ -270,7 +290,7 @@ Dropdown.propTypes = {
   disabled: React.PropTypes.bool,
 
   /**
-   * Align the menu to the right  side of the Dropdown toggle
+   * Align the menu to the right side of the Dropdown toggle
    */
   pullRight: React.PropTypes.bool,
 
@@ -304,7 +324,12 @@ Dropdown.propTypes = {
    * function(Object event, Any eventKey)
    * ```
    */
-  onSelect: React.PropTypes.func
+  onSelect: React.PropTypes.func,
+
+  /**
+   * Focus first menu item on menu open on all events, not just keydown events.
+   */
+  alwaysFocusNextOnOpen: React.PropTypes.bool
 };
 
 Dropdown = uncontrollable(Dropdown, { open: 'onToggle' });

test/DropdownSpec.js

@@ -416,7 +416,7 @@ describe('Dropdown', () => {
     // I am fairly confident that the failure is due to a test specific conflict and not an actual bug.
     it('when open and the key "esc" is pressed the menu is closed and focus is returned to the button', () => {
       const instance = React.render(
-        <Dropdown defaultOpen id='test-id'>
+        <Dropdown defaultOpen alwaysFocusNextOnOpen id='test-id'>
           {dropdownChildren}
         </Dropdown>
       , focusableContainer);