Update to v0.1.5

Author: ericgio

build/react-bootstrap-typeahead.js

@@ -1,5 +1,9 @@
 'use strict';
 
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
 var _react = require('react');
 
 var _react2 = _interopRequireDefault(_react);
@@ -46,11 +50,9 @@ var Token = _react2.default.createClass({
       selected: false
     };
   },
-
   render: function render() {
     return this.props.onRemove ? this._renderRemoveableToken() : this._renderToken();
   },
-
   _renderRemoveableToken: function _renderRemoveableToken() {
     return _react2.default.createElement(
       'button',
@@ -71,7 +73,6 @@ var Token = _react2.default.createClass({
       )
     );
   },
-
   _renderToken: function _renderToken() {
     var classnames = (0, _classnames2.default)('token', this.props.className);
 
@@ -89,12 +90,10 @@ var Token = _react2.default.createClass({
       this.props.children
     );
   },
-
   _handleBlur: function _handleBlur(e) {
     (0, _reactDom.findDOMNode)(this).blur();
     this.setState({ selected: false });
   },
-
   _handleKeyDown: function _handleKeyDown(e) {
     switch (e.keyCode) {
       case _keyCode2.default.BACKSPACE:
@@ -114,15 +113,13 @@ var Token = _react2.default.createClass({
   handleClickOutside: function handleClickOutside(e) {
     this._handleBlur();
   },
-
   _handleRemove: function _handleRemove(e) {
     this.props.onRemove && this.props.onRemove();
   },
-
   _handleSelect: function _handleSelect(e) {
     e.stopPropagation();
     this.setState({ selected: true });
   }
 });
 
-module.exports = Token;
+exports.default = Token;

build/react-bootstrap-typeahead.js.map

@@ -2,6 +2,10 @@
 
 var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
 var _reactInputAutosize = require('react-input-autosize');
 
 var _reactInputAutosize2 = _interopRequireDefault(_reactInputAutosize);
@@ -79,7 +83,6 @@ var TokenizerInput = _react2.default.createClass({
       }))
     );
   },
-
   _renderToken: function _renderToken(option, idx) {
     var _props2 = this.props;
     var onRemove = _props2.onRemove;
@@ -122,4 +125,4 @@ var TokenizerInput = _react2.default.createClass({
   }
 });
 
-module.exports = TokenizerInput;
+exports.default = TokenizerInput;

build/react-bootstrap-typeahead.min.js

@@ -1,5 +1,9 @@
 'use strict';
 
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
 var _react = require('react');
 
 var _react2 = _interopRequireDefault(_react);
@@ -16,14 +20,10 @@ var _TypeaheadMenu = require('./TypeaheadMenu.react');
 
 var _TypeaheadMenu2 = _interopRequireDefault(_TypeaheadMenu);
 
-var _reactDom = require('react-dom');
-
 var _lodash = require('lodash');
 
 var _keyCode = require('./keyCode');
 
-var _keyCode2 = _interopRequireDefault(_keyCode);
-
 var _reactOnclickoutside = require('react-onclickoutside');
 
 var _reactOnclickoutside2 = _interopRequireDefault(_reactOnclickoutside);
@@ -74,20 +74,18 @@ var Typeahead = _react2.default.createClass({
       selected: []
     };
   },
-
   getInitialState: function getInitialState() {
     var _props = this.props;
     var defaultSelected = _props.defaultSelected;
     var selected = _props.selected;
 
     return {
-      focusedMenuItem: null,
+      activeIndex: 0,
       selected: !(0, _lodash.isEmpty)(defaultSelected) ? defaultSelected : selected,
       showMenu: false,
       text: ''
     };
   },
-
   componentWillReceiveProps: function componentWillReceiveProps(nextProps) {
     if (!(0, _lodash.isEqual)(this.props.selected, nextProps.selected)) {
       // If new selections are passed in via props, treat the component as a
@@ -99,13 +97,13 @@ var Typeahead = _react2.default.createClass({
       this.setState({ text: '' });
     }
   },
-
   render: function render() {
     var _props2 = this.props;
     var labelKey = _props2.labelKey;
     var multiple = _props2.multiple;
     var options = _props2.options;
     var _state = this.state;
+    var activeIndex = _state.activeIndex;
     var selected = _state.selected;
     var text = _state.text;
 
@@ -116,16 +114,15 @@ var Typeahead = _react2.default.createClass({
       return !(option[labelKey].toLowerCase().indexOf(text.toLowerCase()) === -1 || multiple && (0, _lodash.find)(selected, option));
     });
 
-    var menu;
+    var menu = undefined;
     if (this.state.showMenu) {
       menu = _react2.default.createElement(_TypeaheadMenu2.default, {
+        activeIndex: activeIndex,
         emptyLabel: this.props.emptyLabel,
         labelKey: labelKey,
         maxHeight: this.props.maxHeight,
         onClick: this._handleAddOption,
-        onKeyDown: this._handleKeydown,
-        options: filteredOptions,
-        ref: 'menu'
+        options: filteredOptions
       });
     }
 
@@ -148,7 +145,7 @@ var Typeahead = _react2.default.createClass({
         onAdd: this._handleAddOption,
         onChange: this._handleTextChange,
         onFocus: this._handleFocus,
-        onKeyDown: this._handleKeydown,
+        onKeyDown: this._handleKeydown.bind(null, filteredOptions),
         onRemove: this._handleRemoveOption,
         placeholder: this.props.placeholder,
         ref: 'input',
@@ -158,87 +155,64 @@ var Typeahead = _react2.default.createClass({
       menu
     );
   },
-
   _handleFocus: function _handleFocus() {
     this.setState({ showMenu: true });
   },
-
   _handleTextChange: function _handleTextChange(e) {
     this.setState({
+      activeIndex: 0,
       showMenu: true,
       text: e.target.value
     });
   },
-
-  _handleKeydown: function _handleKeydown(e) {
-    var focusedMenuItem = (0, _lodash.clone)(this.state.focusedMenuItem);
+  _handleKeydown: function _handleKeydown(options, e) {
+    var activeIndex = this.state.activeIndex;
 
     switch (e.keyCode) {
-      case _keyCode2.default.UP:
-      case _keyCode2.default.DOWN:
-      case _keyCode2.default.TAB:
-        // Prevent page from scrolling when pressing up or down.
+      case _keyCode.BACKSPACE:
+        // Don't let the browser go back.
+        e.stopPropagation();
+        break;
+      case _keyCode.UP:
+        // Prevent page from scrolling.
         e.preventDefault();
 
-        // Look for the menu. It won't be there if there are no results.
-        var menu = this.refs.menu && (0, _reactDom.findDOMNode)(this.refs.menu);
-        if (!menu) {
-          return;
-        }
-
-        if (e.keyCode === _keyCode2.default.UP) {
-          if (!focusedMenuItem) {
-            // The input is focused and the user pressed the down key; select
-            // the first menu item.
-            focusedMenuItem = menu.lastChild;
-          } else {
-            focusedMenuItem = focusedMenuItem.previousSibling || null;
-          }
-        } else {
-          // keyCode.DOWN
-          if (!focusedMenuItem) {
-            // The input is focused and the user pressed the down key; select
-            // the first menu item.
-            focusedMenuItem = menu.firstChild;
-          } else {
-            focusedMenuItem = focusedMenuItem.nextSibling || null;
-          }
+        activeIndex--;
+        if (activeIndex < 0) {
+          activeIndex = options.length - 1;
         }
+        this.setState({ activeIndex: activeIndex });
+        break;
+      case _keyCode.DOWN:
+      case _keyCode.TAB:
+        // Prevent page from scrolling.
+        e.preventDefault();
 
-        if (focusedMenuItem) {
-          // Select the link in the menu item.
-          focusedMenuItem.firstChild.focus();
-        } else {
-          // If there's no focused item, it means we're at the beginning or the
-          // end of the menu. Focus the input.
-          (0, _reactDom.findDOMNode)(this.refs.input).focus();
+        activeIndex++;
+        if (activeIndex === options.length) {
+          activeIndex = 0;
         }
-
-        this.setState({ focusedMenuItem: focusedMenuItem });
+        this.setState({ activeIndex: activeIndex });
         break;
-      case _keyCode2.default.ESC:
+      case _keyCode.ESC:
         // Prevent things like unintentionally closing dialogs.
         e.stopPropagation();
         this._hideDropdown();
         break;
-      case _keyCode2.default.RETURN:
-        if (focusedMenuItem) {
-          // Simulate clicking on the anchor.
-          focusedMenuItem.firstChild.click();
-          this._hideDropdown();
-        }
+      case _keyCode.RETURN:
+        var selected = options[activeIndex];
+        selected && this._handleAddOption(selected);
         break;
     }
   },
-
   _handleAddOption: function _handleAddOption(selectedOption) {
     var _props3 = this.props;
     var multiple = _props3.multiple;
     var labelKey = _props3.labelKey;
     var onChange = _props3.onChange;
 
-    var selected;
-    var text;
+    var selected = undefined;
+    var text = undefined;
 
     if (multiple) {
       // If multiple selections are allowed, add the new selection to the
@@ -253,21 +227,22 @@ var Typeahead = _react2.default.createClass({
     }
 
     this.setState({
+      activeIndex: 0,
       selected: selected,
       showMenu: false,
       text: text
     });
 
     onChange && onChange(selected);
   },
-
   _handleRemoveOption: function _handleRemoveOption(removedOption) {
     var selected = this.state.selected.slice();
     selected = selected.filter(function (option) {
       return !(0, _lodash.isEqual)(option, removedOption);
     });
 
     this.setState({
+      activeIndex: 0,
       selected: selected,
       showMenu: false
     });
@@ -281,13 +256,12 @@ var Typeahead = _react2.default.createClass({
   handleClickOutside: function handleClickOutside(e) {
     this._hideDropdown();
   },
-
   _hideDropdown: function _hideDropdown() {
     this.setState({
-      showMenu: false,
-      focusedMenuItem: null
+      activeIndex: 0,
+      showMenu: false
     });
   }
 });
 
-module.exports = Typeahead;
+exports.default = Typeahead;

build/react-bootstrap-typeahead.min.js.map

@@ -2,6 +2,10 @@
 
 var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
 var _react = require('react');
 
 var _react2 = _interopRequireDefault(_react);
@@ -82,7 +86,6 @@ var TypeaheadInput = _react2.default.createClass({
       })
     );
   },
-
   _getInputValue: function _getInputValue() {
     var _props = this.props;
     var labelKey = _props.labelKey;
@@ -91,7 +94,6 @@ var TypeaheadInput = _react2.default.createClass({
 
     return selected ? selected[labelKey] : text;
   },
-
   _getHintText: function _getHintText() {
     var _props2 = this.props;
     var filteredOptions = _props2.filteredOptions;
@@ -152,4 +154,4 @@ var TypeaheadInput = _react2.default.createClass({
   }
 });
 
-module.exports = TypeaheadInput;
+exports.default = TypeaheadInput;