[release] 1.0.0-rc1 vets moving to a prop-driven value over internal state.

Author: Stephen Rivas Jr

CHANGELOG.md

@@ -1,4 +1,16 @@
-v0.2.1 - Wed, 12 Aug 2015 20:22:13 GMT
+v1.0.0-rc1 - 31 Mar 2016
+--------------------------------------
+
+- Updated this component to no longer use internal state
+for retaining value, this is prop driven now.
+- The version number `1.0.0-rc1` is an unforunate coincidence,
+We're only bumping this as it introduces breaking changes.
+- Other outstanding PRs may be merged in to the the final
+release so we can break several things at once (now that we
+have tests of course)
+
+
+v0.2.1 - 10 Mar 2016
 --------------------------------------
 
 - Added unit tests (thanks @ryanalane)

build/lib/Autocomplete.js

@@ -12,7 +12,7 @@ var Autocomplete = React.createClass({
   displayName: 'Autocomplete',
 
   propTypes: {
-    initialValue: React.PropTypes.any,
+    value: React.PropTypes.any,
     onChange: React.PropTypes.func,
     onSelect: React.PropTypes.func,
     shouldItemRender: React.PropTypes.func,
@@ -24,6 +24,7 @@ var Autocomplete = React.createClass({
 
   getDefaultProps: function getDefaultProps() {
     return {
+      value: '',
       inputProps: {},
       labelText: '',
       onChange: function onChange() {},
@@ -49,7 +50,6 @@ var Autocomplete = React.createClass({
   // TODO: don't cheat, let it flow to the bottom
   getInitialState: function getInitialState() {
     return {
-      value: this.props.initialValue || '',
       isOpen: false,
       highlightedIndex: null
     };
@@ -95,14 +95,8 @@ var Autocomplete = React.createClass({
   },
 
   handleChange: function handleChange(event) {
-    var _this = this;
-
     this._performAutoCompleteOnKeyUp = true;
-    this.setState({
-      value: event.target.value
-    }, function () {
-      _this.props.onChange(event, _this.state.value);
-    });
+    this.props.onChange(event, event.target.value);
   },
 
   handleKeyUp: function handleKeyUp() {
@@ -138,7 +132,7 @@ var Autocomplete = React.createClass({
     },
 
     Enter: function Enter(event) {
-      var _this2 = this;
+      var _this = this;
 
       if (this.state.isOpen === false) {
         // menu is closed so there is no selection to accept -> do nothing
@@ -148,19 +142,19 @@ var Autocomplete = React.createClass({
         this.setState({
           isOpen: false
         }, function () {
-          _this2.refs.input.select();
+          _this.refs.input.select();
         });
       } else {
         // text entered + menu item has been highlighted + enter is hit -> update value to that of selected menu item, close the menu
         var item = this.getFilteredItems()[this.state.highlightedIndex];
+        var value = this.props.getItemValue(item);
         this.setState({
-          value: this.props.getItemValue(item),
           isOpen: false,
           highlightedIndex: null
         }, function () {
           //this.refs.input.focus() // TODO: file issue
-          _this2.refs.input.setSelectionRange(_this2.state.value.length, _this2.state.value.length);
-          _this2.props.onSelect(_this2.state.value, item);
+          _this.refs.input.setSelectionRange(value.length, value.length);
+          _this.props.onSelect(value, item);
         });
       }
     },
@@ -174,41 +168,41 @@ var Autocomplete = React.createClass({
   },
 
   getFilteredItems: function getFilteredItems() {
-    var _this3 = this;
+    var _this2 = this;
 
     var items = this.props.items;
 
     if (this.props.shouldItemRender) {
       items = items.filter(function (item) {
-        return _this3.props.shouldItemRender(item, _this3.state.value);
+        return _this2.props.shouldItemRender(item, _this2.props.value);
       });
     }
 
     if (this.props.sortItems) {
       items.sort(function (a, b) {
-        return _this3.props.sortItems(a, b, _this3.state.value);
+        return _this2.props.sortItems(a, b, _this2.props.value);
       });
     }
 
     return items;
   },
 
   maybeAutoCompleteText: function maybeAutoCompleteText() {
-    var _this4 = this;
+    var _this3 = this;
 
-    if (this.state.value === '') return;
+    if (this.props.value === '') return;
     var highlightedIndex = this.state.highlightedIndex;
 
     var items = this.getFilteredItems();
     if (items.length === 0) return;
     var matchedItem = highlightedIndex !== null ? items[highlightedIndex] : items[0];
     var itemValue = this.props.getItemValue(matchedItem);
-    var itemValueDoesMatch = itemValue.toLowerCase().indexOf(this.state.value.toLowerCase()) === 0;
+    var itemValueDoesMatch = itemValue.toLowerCase().indexOf(this.props.value.toLowerCase()) === 0;
     if (itemValueDoesMatch) {
       var node = this.refs.input;
       var setSelection = function setSelection() {
         node.value = itemValue;
-        node.setSelectionRange(_this4.state.value.length, itemValue.length);
+        node.setSelectionRange(_this3.props.value.length, itemValue.length);
       };
       if (highlightedIndex === null) this.setState({ highlightedIndex: 0 }, setSelection);else setSelection();
     }
@@ -233,16 +227,16 @@ var Autocomplete = React.createClass({
   },
 
   selectItemFromMouse: function selectItemFromMouse(item) {
-    var _this5 = this;
+    var _this4 = this;
 
+    var value = this.props.getItemValue(item);
     this.setState({
-      value: this.props.getItemValue(item),
       isOpen: false,
       highlightedIndex: null
     }, function () {
-      _this5.props.onSelect(_this5.state.value, item);
-      _this5.refs.input.focus();
-      _this5.setIgnoreBlur(false);
+      _this4.props.onSelect(value, item);
+      _this4.refs.input.focus();
+      _this4.setIgnoreBlur(false);
     });
   },
 
@@ -251,19 +245,19 @@ var Autocomplete = React.createClass({
   },
 
   renderMenu: function renderMenu() {
-    var _this6 = this;
+    var _this5 = this;
 
     var items = this.getFilteredItems().map(function (item, index) {
-      var element = _this6.props.renderItem(item, _this6.state.highlightedIndex === index, { cursor: 'default' });
+      var element = _this5.props.renderItem(item, _this5.state.highlightedIndex === index, { cursor: 'default' });
       return React.cloneElement(element, {
         onMouseDown: function onMouseDown() {
-          return _this6.setIgnoreBlur(true);
+          return _this5.setIgnoreBlur(true);
         },
         onMouseEnter: function onMouseEnter() {
-          return _this6.highlightItemFromMouse(index);
+          return _this5.highlightItemFromMouse(index);
         },
         onClick: function onClick() {
-          return _this6.selectItemFromMouse(item);
+          return _this5.selectItemFromMouse(item);
         },
         ref: 'item-' + index
       });
@@ -273,7 +267,7 @@ var Autocomplete = React.createClass({
       top: this.state.menuTop,
       minWidth: this.state.menuWidth
     };
-    var menu = this.props.renderMenu(items, this.state.value, style);
+    var menu = this.props.renderMenu(items, this.props.value, style);
     return React.cloneElement(menu, { ref: 'menu' });
   },
 
@@ -295,7 +289,7 @@ var Autocomplete = React.createClass({
   },
 
   render: function render() {
-    var _this7 = this;
+    var _this6 = this;
 
     if (this.props.debug) {
       // you don't like it, you love it
@@ -319,16 +313,16 @@ var Autocomplete = React.createClass({
         onFocus: this.handleInputFocus,
         onBlur: this.handleInputBlur,
         onChange: function (event) {
-          return _this7.handleChange(event);
+          return _this6.handleChange(event);
         },
         onKeyDown: function (event) {
-          return _this7.handleKeyDown(event);
+          return _this6.handleKeyDown(event);
         },
         onKeyUp: function (event) {
-          return _this7.handleKeyUp(event);
+          return _this6.handleKeyUp(event);
         },
         onClick: this.handleInputClick,
-        value: this.state.value,
+        value: this.props.value,
         id: this.id
       })),
       this.state.isOpen && this.renderMenu(),

build/lib/__tests__/Autocomplete-test.js

@@ -44,7 +44,6 @@ _chai2['default'].use((0, _chaiEnzyme2['default'])());
 
 function AutocompleteComponentJSX(extraProps) {
   return _react2['default'].createElement(_Autocomplete2['default'], _extends({
-    initialValue: '',
     labelText: 'Choose a state from the US',
     inputProps: { name: "US state" },
     getItemValue: function (item) {
@@ -82,11 +81,11 @@ describe('Autocomplete acceptance tests', function () {
     expect(autocompleteWrapper.instance().refs.menu).to.exist;
   });
 
-  it('should show results when partial match is typed in', function () {
+  it('should show results when value is a partial match', function () {
 
     // Render autocomplete results upon partial input match
     expect(autocompleteWrapper.ref('menu').children()).to.have.length(50);
-    autocompleteInputWrapper.simulate('change', { target: { value: 'Ar' } });
+    autocompleteWrapper.setProps({ value: 'Ar' });
     expect(autocompleteWrapper.ref('menu').children()).to.have.length(6);
   });
 
@@ -101,6 +100,28 @@ describe('Autocomplete acceptance tests', function () {
 
 // Event handler unit tests
 
+describe('Autocomplete keyPress-><character> event handlers', function () {
+
+  var autocompleteWrapper = (0, _enzyme.mount)(AutocompleteComponentJSX({}));
+  var autocompleteInputWrapper = autocompleteWrapper.find('input');
+
+  it('should pass updated `input.value` to `onChange` and replace with `props.value`', function (done) {
+
+    var value = '';
+    autocompleteWrapper.setProps({ value: value, onChange: function onChange(_, v) {
+        value = v;
+      } });
+
+    autocompleteInputWrapper.get(0).value = 'a';
+    autocompleteInputWrapper.simulate('keyPress', { key: 'a', keyCode: 97, which: 97 });
+    autocompleteInputWrapper.simulate('change');
+
+    expect(autocompleteInputWrapper.get(0).value).to.equal('');
+    expect(value).to.equal('a');
+    done();
+  });
+});
+
 describe('Autocomplete kewDown->ArrowDown event handlers', function () {
 
   var autocompleteWrapper = (0, _enzyme.mount)(AutocompleteComponentJSX({}));
@@ -201,31 +222,37 @@ describe('Autocomplete kewDown->Enter event handlers', function () {
   });
 
   it('should close menu if input has focus but no item has been selected and then the Enter key is hit', function () {
+    var value = '';
     autocompleteWrapper.setState({ 'isOpen': true });
     autocompleteInputWrapper.simulate('focus');
-    autocompleteInputWrapper.simulate('change', { target: { value: '' } });
+    autocompleteWrapper.setProps({ value: value, onSelect: function onSelect(v) {
+        value = v;
+      } });
 
     // simulate keyUp of backspace, triggering autocomplete suggestion on an empty string, which should result in nothing highlighted
     autocompleteInputWrapper.simulate('keyUp', { key: 'Backspace', keyCode: 8, which: 8 });
     expect(autocompleteWrapper.state('highlightedIndex')).to.be['null'];
 
     autocompleteInputWrapper.simulate('keyDown', { key: 'Enter', keyCode: 13, which: 13 });
 
-    expect(autocompleteWrapper.state('value')).to.equal('');
+    expect(value).to.equal('');
     expect(autocompleteWrapper.state('isOpen')).to.be['false'];
   });
 
-  it('should update input value from selected menu item and close the menu', function () {
+  it('should invoke `onSelect` with the selected menu item and close the menu', function () {
+    var value = 'Ar';
     autocompleteWrapper.setState({ 'isOpen': true });
     autocompleteInputWrapper.simulate('focus');
-    autocompleteInputWrapper.simulate('change', { target: { value: 'Ar' } });
+    autocompleteWrapper.setProps({ value: value, onSelect: function onSelect(v) {
+        value = v;
+      } });
 
     // simulate keyUp of last key, triggering autocomplete suggestion + selection of the suggestion in the menu
     autocompleteInputWrapper.simulate('keyUp', { key: 'r', keyCode: 82, which: 82 });
 
     // Hit enter, updating state.value with the selected Autocomplete suggestion
     autocompleteInputWrapper.simulate('keyDown', { key: 'Enter', keyCode: 13, which: 13 });
-    expect(autocompleteWrapper.state('value')).to.equal('Arizona');
+    expect(value).to.equal('Arizona');
     expect(autocompleteWrapper.state('isOpen')).to.be['false'];
   });
 });
@@ -262,7 +289,7 @@ describe('Autocomplete#renderMenu', function () {
 
   it('should return a menu ReactComponent with a subset of children when partial match text has been entered', function () {
     // Input 'Ar' should result in 6 items in the menu, populated from autocomplete.
-    autocompleteInputWrapper.simulate('change', { target: { value: 'Ar' } });
+    autocompleteWrapper.setProps({ value: 'Ar' });
 
     var autocompleteMenu = autocompleteWrapper.instance().renderMenu();
     expect(autocompleteMenu.props.children.length).to.be.equal(6);

build/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-autocomplete",
-  "version": "0.2.1",
+  "version": "1.0.0-rc1",
   "description": "Accessible, extensible, Autocomplete for React.js",
   "main": "./build/lib/index.js",
   "repository": {