Fix tabbing behavior

ericgio · May 20, 2016 · 8650f16 · 8650f16
1 parent a3199cf
commit 8650f16
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 20 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-bootstrap-typeahead",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "description": "React-based typeahead using the Bootstrap theme",
   "main": "lib/index.js",
   "directories": {

diff --git a/src/TokenizerInput.react.js b/src/TokenizerInput.react.js
@@ -6,7 +6,7 @@ import Token from './Token.react';
 
 import cx from 'classnames';
 import {findDOMNode} from 'react-dom';
-import keyCode from './keyCode';
+import {BACKSPACE, LEFT, RIGHT} from './keyCode';
 
 /**
  * TokenizerInput
@@ -40,14 +40,14 @@ const TokenizerInput = React.createClass({
       <div
         className={cx(
           'bootstrap-tokenizer',
-          'form-control',
           'clearfix',
+          'form-control',
           {'focus': this.state.focused}
         )}
         disabled={disabled}
         onClick={this._handleInputFocus}
         onFocus={this._handleInputFocus}
-        tabIndex={disabled ? -1 : 0}>
+        tabIndex={-1}>
         {selected.map(this._renderToken)}
         <AutosizeInput
           {...this.props}
@@ -86,16 +86,12 @@ const TokenizerInput = React.createClass({
 
   _handleBlur(e) {
     this.setState({focused: false});
+    this.props.onBlur();
   },
 
   _handleKeydown(e) {
     switch (e.keyCode) {
-      case keyCode.LEFT:
-      case keyCode.RIGHT:
-        // TODO: Tab forward and backward through tokens when user clicks left
-        // or right arrow keys.
-        break;
-      case keyCode.BACKSPACE:
+      case BACKSPACE:
         let inputNode = findDOMNode(this.refs.input);
         if (
           inputNode &&
@@ -108,6 +104,11 @@ const TokenizerInput = React.createClass({
           sibling && sibling.focus();
         }
         break;
+      case LEFT:
+      case RIGHT:
+        // TODO: Tab forward and backward through tokens when user clicks left
+        // or right arrow keys.
+        break;
     }
 
     this.props.onKeyDown && this.props.onKeyDown(e);

diff --git a/src/Typeahead.react.js b/src/Typeahead.react.js
@@ -7,7 +7,7 @@ import TypeaheadInput from './TypeaheadInput.react';
 import TypeaheadMenu from './TypeaheadMenu.react';
 
 import {find, head, isEmpty, isEqual, uniqueId} from 'lodash';
-import {BACKSPACE, DOWN, ESC, RETURN, TAB, UP} from './keyCode';
+import {BACKSPACE, DOWN, ESC, RETURN, UP} from './keyCode';
 import listensToClickOutside from 'react-onclickoutside/decorator';
 
 require('../css/Typeahead.css');
@@ -199,6 +199,7 @@ const Typeahead = React.createClass({
           filteredOptions={filteredOptions}
           labelKey={labelKey}
           onAdd={this._handleAddOption}
+          onBlur={this._handleBlur}
           onChange={this._handleTextChange}
           onFocus={this._handleFocus}
           onKeyDown={this._handleKeydown.bind(null, filteredOptions)}
@@ -212,6 +213,10 @@ const Typeahead = React.createClass({
     );
   },
 
+  _handleBlur() {
+    this._hideDropdown();
+  },
+
   _handleFocus() {
     this.setState({showMenu: true});
   },
@@ -237,13 +242,11 @@ const Typeahead = React.createClass({
         break;
       case UP:
       case DOWN:
-      case TAB:
         // Prevent page from scrolling.
         e.preventDefault();
 
         // Increment or decrement index based on user keystroke.
-        activeIndex +=
-          e.keyCode === UP || (e.keyCode === TAB && e.shiftKey) ? -1 : 1;
+        activeIndex += e.keyCode === UP ? -1 : 1;
 
         // If we've reached the end, go back to the beginning or vice-versa.
         activeIndex = (activeIndex + options.length) % options.length;

diff --git a/src/TypeaheadInput.react.js b/src/TypeaheadInput.react.js
@@ -4,7 +4,7 @@ import React, {PropTypes} from 'react';
 
 import cx from 'classnames';
 import {head} from 'lodash';
-import keyCode from './keyCode';
+import {BACKSPACE, ESC, RIGHT, TAB} from './keyCode';
 import listensToClickOutside from 'react-onclickoutside/decorator';
 
 /**
@@ -30,13 +30,13 @@ const TypeaheadInput = React.createClass({
         className={cx('bootstrap-typeahead-input', this.props.className)}
         onClick={this._handleInputFocus}
         onFocus={this._handleInputFocus}
-        style={{outline: 'none'}}
-        tabIndex={0}>
+        style={{outline: 'none'}}>
         <input
           {...this.props}
           className={cx('bootstrap-typeahead-input-main', 'form-control', {
             'has-selection': !this.props.selected,
           })}
+          onBlur={this._handleBlur}
           onKeyDown={this._handleKeydown}
           ref="input"
           style={{
@@ -60,6 +60,7 @@ const TypeaheadInput = React.createClass({
             width: '100%',
             zIndex: 0,
           }}
+          tabIndex={-1}
           value={this._getHintText()}
         />
       </div>
@@ -89,6 +90,10 @@ const TypeaheadInput = React.createClass({
     }
   },
 
+  _handleBlur(e) {
+    this.props.onBlur();
+  },
+
   /**
    * If the containing parent div is focused or clicked, focus the input.
    */
@@ -100,16 +105,17 @@ const TypeaheadInput = React.createClass({
     const {filteredOptions, onAdd, onRemove, selected} = this.props;
 
     switch (e.keyCode) {
-      case keyCode.ESC:
+      case ESC:
+      case TAB:
         this.refs.input.blur();
         break;
-      case keyCode.RIGHT:
+      case RIGHT:
         // Autocomplete the selection if there's a hint and no selection yet.
         if (this._getHintText() && !selected) {
           onAdd && onAdd(head(filteredOptions));
         }
         break;
-      case keyCode.BACKSPACE:
+      case BACKSPACE:
         // Remove the selection if we start deleting it.
         selected && onRemove && onRemove(selected);
         break;