diff --git a/examples/async-data/app.js b/examples/async-data/app.js index c1ff0b17..2b964e28 100644 --- a/examples/async-data/app.js +++ b/examples/async-data/app.js @@ -15,14 +15,12 @@ let App = React.createClass({ return (

Async Data

-

Autocomplete works great with async data by allowing you to pass in items. The onChange 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.

- { + setValue(value.split(',').reverse().join()) + }} renderItem={(item, isHighlighted) => (
{ - 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 diff --git a/lib/__tests__/Autocomplete-test.js b/lib/__tests__/Autocomplete-test.js index 0ed62408..e1202e0f 100644 --- a/lib/__tests__/Autocomplete-test.js +++ b/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 ( 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'); diff --git a/package.json b/package.json index e08e8de3..24ca63ca 100644 --- a/package.json +++ b/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",