Merge pull request react-bootstrap#1375 from taion/dropdown-focus

Use role to determine dropdown open focus behavior
michelgb · Oct 3, 2015 · 1403cd3 · 1403cd3
2 parents a38bed7 + 4fe8565
commit 1403cd3
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 13 deletions.
diff --git a/src/Dropdown.js b/src/Dropdown.js
@@ -48,7 +48,6 @@ class Dropdown extends React.Component {
     this.state = {};
 
     this.lastOpenEventType = null;
-    this.isKeyboardClick = false;
   }
 
   componentDidMount() {
@@ -83,7 +82,7 @@ class Dropdown extends React.Component {
     let children = this.extractChildren();
     let Component = this.props.componentClass;
 
-    let props = omit(this.props, ['id']);
+    let props = omit(this.props, ['id', 'role']);
 
     const rootClasses = {
       open: this.props.open,
@@ -120,8 +119,7 @@ class Dropdown extends React.Component {
       return;
     }
 
-    this.toggleOpen(this.isKeyboardClick ? 'keydown' : 'click');
-    this.isKeyboardClick = false;
+    this.toggleOpen('click');
   }
 
   handleKeyDown(event) {
@@ -142,10 +140,6 @@ class Dropdown extends React.Component {
     case keycode.codes.tab:
       this.handleClose(event);
       break;
-    case keycode.codes.space:
-    case keycode.codes.enter:
-      this.isKeyboardClick = true;
-      break;
     default:
     }
   }
@@ -166,7 +160,7 @@ class Dropdown extends React.Component {
 
     if (
       this.lastOpenEventType === 'keydown' ||
-      this.props.alwaysFocusNextOnOpen
+      this.props.role === 'menuitem'
     ) {
       menu.focusNext();
     }
@@ -227,7 +221,8 @@ class Dropdown extends React.Component {
     let toggleProps = {
       open,
       id: this.props.id,
-      ref: TOGGLE_REF
+      ref: TOGGLE_REF,
+      role: this.props.role
     };
 
     toggleProps.onClick = createChainedFunction(
@@ -327,9 +322,10 @@ Dropdown.propTypes = {
   onSelect: React.PropTypes.func,
 
   /**
-   * Focus first menu item on menu open on all events, not just keydown events.
+   * If `'menuitem'`, causes the dropdown to behave like a menu item rather than
+   * a menu button.
    */
-  alwaysFocusNextOnOpen: React.PropTypes.bool
+  role: React.PropTypes.string
 };
 
 Dropdown = uncontrollable(Dropdown, { open: 'onToggle' });

diff --git a/test/DropdownSpec.js b/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 alwaysFocusNextOnOpen id='test-id'>
+        <Dropdown defaultOpen role="menuitem" id="test-id">
           {dropdownChildren}
         </Dropdown>
       , focusableContainer);