Trigger event on enter #25

examples/async-data/app.js

@@ -15,14 +15,12 @@ let App = React.createClass({
     return (
       <div>
         <h1>Async Data</h1>
-
         <p>
           Autocomplete works great with async data by allowing you to pass in
           items. The <code>onChange</code> event provides you the value to make
           a server request with, then change state and pass in new items, it will
           attempt to autocomplete the first one.
         </p>
-
         <Autocomplete
           labelText="Choose a state from the US"
           inputProps={{name: "US state"}}
@@ -41,6 +39,9 @@ let App = React.createClass({
               this.setState({ unitedStates: items, loading: false })
             })
           }}
+          onSubmit={(value, setValue) => {
+            setValue(value.split(',').reverse().join())
+          }}
           renderItem={(item, isHighlighted) => (
             <div
               style={isHighlighted ? styles.highlightedItem : styles.item}

lib/Autocomplete.js

@@ -10,6 +10,7 @@ let Autocomplete = React.createClass({
     initialValue: React.PropTypes.any,
     onChange: React.PropTypes.func,
     onSelect: React.PropTypes.func,
+    onSubmit: React.PropTypes.func,
     shouldItemRender: React.PropTypes.func,
     renderItem: React.PropTypes.func.isRequired,
     menuStyle: React.PropTypes.object,
@@ -145,7 +146,10 @@ let Autocomplete = React.createClass({
         this.setState({
           isOpen: false
         }, () => {
-          this.refs.input.select()
+          if (this.props.onSubmit)
+            this.props.onSubmit(this.state.value, this.setValue);
+          else
+            this.refs.input.select();
         })
       }
       else {
@@ -174,6 +178,12 @@ let Autocomplete = React.createClass({
     }
   },
 
+  setValue (newValue) {
+    this.setState({
+      value: newValue
+    })
+  },
+
   getFilteredItems () {
     let items = this.props.items
 

lib/__tests__/Autocomplete-test.js

@@ -3,6 +3,7 @@ import ReactDOM from 'react-dom'
 import TestUtils from 'react-addons-test-utils'
 import jsdom from 'mocha-jsdom';
 import chai from 'chai';
+import sinon from 'sinon';
 const expect = chai.expect;
 import chaiEnzyme from 'chai-enzyme'
 import { ok, equal } from 'assert';
@@ -12,6 +13,8 @@ import { getStates, matchStateToTerm, sortStates, styles } from '../utils'
 
 chai.use(chaiEnzyme());
 
+let onSubmitStub = sinon.stub();
+
 function AutocompleteComponentJSX (extraProps) {
   return (
     <Autocomplete 
@@ -162,10 +165,12 @@ describe('Autocomplete kewDown->ArrowUp event handlers', () => {
 });
 
 describe('Autocomplete kewDown->Enter event handlers', () => {
-
-  var autocompleteWrapper = mount(AutocompleteComponentJSX({}));
+  var autocompleteWrapper = mount(AutocompleteComponentJSX({
+    onSubmit: onSubmitStub
+  }));
   var autocompleteInputWrapper = autocompleteWrapper.find('input');
 
+
   it('should do nothing if the menu is closed', () => {
     autocompleteWrapper.setState({'isOpen': false});
     autocompleteWrapper.simulate('keyDown', { key : 'Enter', keyCode: 13, which: 13 });
@@ -188,6 +193,16 @@ describe('Autocomplete kewDown->Enter event handlers', () => {
 
   });
 
+  it('should call onSearch prop when no item has been selected and then the Enter key is hit', () => {
+    autocompleteWrapper.setState({'isOpen': true, highlightedIndex: null});
+    autocompleteInputWrapper.simulate('focus');
+    autocompleteInputWrapper.simulate('change', { target: { value: 'TEST' } });
+    autocompleteInputWrapper.simulate('keyDown', { key : 'Enter', keyCode: 13, which: 13 });
+
+    expect(onSubmitStub.called).to.equal(true);
+    expect(onSubmitStub.calledWith('TEST', autocompleteWrapper.component.getWrappedComponent().setValue)).to.equal(true);
+  });
+
   it('should update input value from selected menu item and close the menu', () => {
     autocompleteWrapper.setState({'isOpen': true});
     autocompleteInputWrapper.simulate('focus');

package.json

@@ -36,7 +36,8 @@
     "mocha-jsdom": "^1.1.0",
     "rackt-cli": "^0.4.0",
     "react": "^0.14.0",
-    "react-addons-test-utils": "^0.14.7"
+    "react-addons-test-utils": "^0.14.7",
+    "sinon": "^1.17.3"
   },
   "tags": [
     "react",