Make Typeahead a controlled component. Fixes #166

Author: nosilleg

package.json

@@ -33,7 +33,8 @@
   },
   "dependencies": {
     "classnames": "^1.2.0",
-    "fuzzy": "^0.1.0"
+    "fuzzy": "^0.1.0",
+    "react-addons-update": "^0.14.7"
   },
   "peerDependencies": {
     "react": ">= 0.14.0"

src/tokenizer/index.js

@@ -7,6 +7,7 @@ var Token = require('./token');
 var KeyEvent = require('../keyevent');
 var Typeahead = require('../typeahead');
 var classNames = require('classnames');
+var update = require('react-addons-update');
 
 function _arraysAreDifferent(array1, array2) {
   if (array1.length != array2.length){
@@ -56,7 +57,8 @@ var TypeaheadTokenizer = React.createClass({
     return {
       // We need to copy this to avoid incorrect sharing
       // of state across instances (e.g., via getDefaultProps())
-      selected: this.props.defaultSelected.slice(0)
+      selected: this.props.defaultSelected.slice(0),
+      value: this.props.defaultValue
     };
   },
 
@@ -140,8 +142,7 @@ var TypeaheadTokenizer = React.createClass({
     var entry = this.refs.typeahead.refs.entry;
     if (entry.selectionStart == entry.selectionEnd &&
         entry.selectionStart == 0) {
-      this._removeTokenForValue(
-        this.state.selected[this.state.selected.length - 1]);
+      this._removeTokenForValue(this.state.selected[this.state.selected.length - 1]);
       event.preventDefault();
     }
   },
@@ -152,22 +153,36 @@ var TypeaheadTokenizer = React.createClass({
       return;
     }
 
-    this.state.selected.splice(index, 1);
-    this.setState({selected: this.state.selected});
+    this.setState(
+      {
+        selected: update(this.state.selected, {$splice: [[index, 1]]})
+      }
+    );
     this.props.onTokenRemove(value);
     return;
   },
 
   _addTokenForValue: function(value) {
-    if (this.state.selected.indexOf(value) != -1) {
+    if (this.state.selected.indexOf(value) !== -1) {
       return;
     }
-    this.state.selected.push(value);
-    this.setState({selected: this.state.selected});
-    this.refs.typeahead.setEntryText("");
+    this.setState(
+      {
+        selected: update(this.state.selected, {$push: [value]}),
+        value: ""
+      }
+    );
     this.props.onTokenAdd(value);
   },
 
+  _onChange: function(event) {
+    this.setState(
+      {
+        value: event.target.value
+      }
+    );
+  },
+
   render: function() {
     var classes = {};
     classes[this.props.customClasses.typeahead] = !!this.props.customClasses.typeahead;
@@ -188,14 +203,16 @@ var TypeaheadTokenizer = React.createClass({
           options={this._getOptionsForTypeahead()}
           defaultValue={this.props.defaultValue}
           maxVisible={this.props.maxVisible}
+          onChange={this._onChange}
           onOptionSelected={this._addTokenForValue}
           onKeyDown={this._onKeyDown}
           onKeyUp={this.props.onKeyUp}
           onFocus={this.props.onFocus}
           onBlur={this.props.onBlur}
           displayOption={this.props.displayOption}
           defaultClassNames={this.props.defaultClassNames}
-          filterOption={this.props.filterOption} />
+          filterOption={this.props.filterOption}
+          value={this.state.value} />
       </div>
     );
   }

src/typeahead/index.js

@@ -124,7 +124,7 @@ var Typeahead = React.createClass({
   _hasCustomValue: function() {
     if (this.props.allowCustomValues > 0 &&
       this.state.entryValue.length >= this.props.allowCustomValues &&
-      this.state.visible.indexOf(this.state.entryValue) < 0) {
+      this.state.visible.indexOf(this.state.entryValue) === -1) {
       return true;
     }
     return false;
@@ -183,17 +183,25 @@ var Typeahead = React.createClass({
     var formInputOptionString = formInputOption(option);
 
     nEntry.value = optionString;
-    this.setState({visible: this.getOptionsForValue(optionString, this.props.options),
-                   selection: formInputOptionString,
-                   entryValue: optionString});
+    this.setState(
+      {
+        visible: this.getOptionsForValue(optionString, this.props.options),
+        selection: formInputOptionString,
+        entryValue: optionString
+      }
+    );
     return this.props.onOptionSelected(option, event);
   },
 
   _onTextEntryUpdated: function() {
     var value = this.refs.entry.value;
-    this.setState({visible: this.getOptionsForValue(value, this.props.options),
-                   selection: null,
-                   entryValue: value});
+    this.setState(
+      {
+        visible: this.getOptionsForValue(value, this.props.options),
+        selection: null,
+        entryValue: value
+      }
+    );
   },
 
   _onEnter: function(event) {
@@ -205,17 +213,19 @@ var Typeahead = React.createClass({
   },
 
   _onEscape: function() {
-    this.setState({
-      selectionIndex: null
-    });
+    this.setState(
+      {
+        selectionIndex: null
+      }
+    );
   },
 
   _onTab: function(event) {
     var selection = this.getSelection();
     var option = selection ?
       selection : (this.state.visible.length > 0 ? this.state.visible[0] : null);
 
-    if (option === null && this._hasCustomValue()) {
+    if (option === null) {
       option = this._getCustomValue();
     }
 
@@ -252,7 +262,11 @@ var Typeahead = React.createClass({
       newIndex -= length;
     }
 
-    this.setState({selectionIndex: newIndex});
+    this.setState(
+      {
+        selectionIndex: newIndex
+      }
+    );
   },
 
   navDown: function() {
@@ -292,7 +306,8 @@ var Typeahead = React.createClass({
 
   componentWillReceiveProps: function(nextProps) {
     this.setState({
-      visible: this.getOptionsForValue(nextProps.entryValue, nextProps.options)
+      visible: this.getOptionsForValue(nextProps.value, nextProps.options),
+      entryValue: nextProps.value
     });
   },
 
@@ -316,13 +331,13 @@ var Typeahead = React.createClass({
           {...this.props.inputProps}
           placeholder={this.props.placeholder}
           className={inputClassList}
-          value={this.state.entryValue}
           defaultValue={this.props.defaultValue}
           onChange={this._onChange}
           onKeyDown={this._onKeyDown}
           onKeyUp={this.props.onKeyUp}
           onFocus={this.props.onFocus}
           onBlur={this.props.onBlur}
+          value={this.props.value}
         />
         { this._renderIncrementalSearchResults() }
       </div>