Fix React 15.2 warnings

ericgio · Jul 19, 2016 · 23260ca · 23260ca
1 parent 19153f0
commit 23260ca
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 13 deletions.
diff --git a/package.json b/package.json
@@ -29,13 +29,13 @@
   "dependencies": {
     "classnames": "^2.2.0",
     "lodash": "^4.12.0",
-    "react-highlighter": "^0.3.1",
-    "react-input-autosize": "^0.6.2",
+    "react-highlighter": "^0.3.3",
+    "react-input-autosize": "^1.1.0",
     "react-onclickoutside": "^4.1.1"
   },
   "peerDependencies": {
-    "react": "^0.14.0 || ^15.0.0",
-    "react-dom": "^0.14.0 || ^15.0.0"
+    "react": "^0.14.0 || ^15.2.0",
+    "react-dom": "^0.14.0 || ^15.2.0"
   },
   "devDependencies": {
     "babel": "^6.3.26",

diff --git a/src/TokenizerInput.react.js b/src/TokenizerInput.react.js
@@ -20,9 +20,6 @@ const TokenizerInput = React.createClass({
   propTypes: {
     disabled: PropTypes.bool,
     labelKey: PropTypes.string,
-    /**
-     * Input element placeholder text.
-     */
     placeholder: PropTypes.string,
     selected: PropTypes.array,
   },
@@ -54,8 +51,8 @@ const TokenizerInput = React.createClass({
         tabIndex={-1}>
         {selected.map(this._renderToken)}
         <AutosizeInput
-          {...this.props}
           className="bootstrap-tokenizer-input"
+          disabled={disabled}
           inputStyle={{
             backgroundColor: 'inherit',
             border: 0,
@@ -65,6 +62,8 @@ const TokenizerInput = React.createClass({
             padding: 0,
           }}
           onBlur={this._handleBlur}
+          onChange={this.props.onChange}
+          onFocus={this.props.onFocus}
           onKeyDown={this._handleKeydown}
           placeholder={selected.length ? null : placeholder}
           ref="input"

diff --git a/src/Typeahead.react.js b/src/Typeahead.react.js
@@ -288,8 +288,8 @@ const Typeahead = React.createClass({
       case ESC:
       case TAB:
         // Prevent things like unintentionally closing dialogs.
-        e.stopPropagation();
-        this._hideDropdown();
+        // e.stopPropagation();
+        // this._hideDropdown();
         break;
       case RETURN:
         if (this.state.showMenu) {

diff --git a/src/TypeaheadInput.react.js b/src/TypeaheadInput.react.js
@@ -3,8 +3,8 @@
 import React, {PropTypes} from 'react';
 
 import cx from 'classnames';
-import {head} from 'lodash';
-import {BACKSPACE, RIGHT} from './keyCode';
+import {head, pick} from 'lodash';
+import {BACKSPACE, RIGHT, TAB} from './keyCode';
 
 /**
  * TypeaheadInput
@@ -20,6 +20,8 @@ const TypeaheadInput = React.createClass({
     labelKey: PropTypes.string,
     onBlur: PropTypes.func,
     onChange: PropTypes.func,
+    onFocus: PropTypes.func,
+    placeholder: PropTypes.string,
     selected: PropTypes.object,
     text: PropTypes.string,
   },
@@ -32,6 +34,12 @@ const TypeaheadInput = React.createClass({
 
   render() {
     const {className, disabled, selected, text} = this.props;
+    const inputProps = pick(this.props, [
+      'disabled',
+      'onChange',
+      'onFocus',
+      'placeholder',
+    ]);
 
     return (
       <div
@@ -41,7 +49,7 @@ const TypeaheadInput = React.createClass({
         style={{outline: 'none'}}
         tabIndex={-1}>
         <input
-          {...this.props}
+          {...inputProps}
           className={cx('bootstrap-typeahead-input-main', 'form-control', {
             'has-selection': !selected,
           })}
@@ -115,8 +123,10 @@ const TypeaheadInput = React.createClass({
 
     switch (e.keyCode) {
       case RIGHT:
+      case TAB:
         // Autocomplete the selection if there's a hint and no selection yet.
         if (this._getHintText() && !selected) {
+          e.stopPropagation();
           onAdd && onAdd(head(filteredOptions));
         }
         break;