diff --git a/examples/async-data/app.css b/examples/async-data/app.css index 306b935f..90cfd090 100644 --- a/examples/async-data/app.css +++ b/examples/async-data/app.css @@ -7,3 +7,8 @@ body { .example { padding: 0 25px; } + +label { + display: block; + margin: 5px 0; +} diff --git a/examples/async-data/app.js b/examples/async-data/app.js index bee691b5..96ba3575 100644 --- a/examples/async-data/app.js +++ b/examples/async-data/app.js @@ -24,6 +24,8 @@ let App = React.createClass({

item.name} diff --git a/examples/custom-menu/app.css b/examples/custom-menu/app.css index 306b935f..90cfd090 100644 --- a/examples/custom-menu/app.css +++ b/examples/custom-menu/app.css @@ -7,3 +7,8 @@ body { .example { padding: 0 25px; } + +label { + display: block; + margin: 5px 0; +} diff --git a/examples/custom-menu/app.js b/examples/custom-menu/app.js index dbaac622..13fa04e3 100644 --- a/examples/custom-menu/app.js +++ b/examples/custom-menu/app.js @@ -21,6 +21,8 @@ let App = React.createClass({ letter of the alphabet.

item.name} onSelect={() => this.setState({ unitedStates: [] }) } diff --git a/examples/static-data/app.css b/examples/static-data/app.css index 306b935f..90cfd090 100644 --- a/examples/static-data/app.css +++ b/examples/static-data/app.css @@ -7,3 +7,8 @@ body { .example { padding: 0 25px; } + +label { + display: block; + margin: 5px 0; +} diff --git a/examples/static-data/app.js b/examples/static-data/app.js index 81dde9ef..229fecdc 100644 --- a/examples/static-data/app.js +++ b/examples/static-data/app.js @@ -15,6 +15,8 @@ let App = React.createClass({ item.name} shouldItemRender={matchStateToTerm} diff --git a/lib/Autocomplete.js b/lib/Autocomplete.js index 6f7efaa5..da2070c6 100644 --- a/lib/Autocomplete.js +++ b/lib/Autocomplete.js @@ -1,4 +1,5 @@ const React = require('react') +const lodash = require('lodash') const scrollIntoView = require('dom-scroll-into-view') let _debugStates = [] @@ -12,12 +13,14 @@ let Autocomplete = React.createClass({ shouldItemRender: React.PropTypes.func, renderItem: React.PropTypes.func.isRequired, menuStyle: React.PropTypes.object, - inputProps: React.PropTypes.object + inputProps: React.PropTypes.object, + labelText: React.PropTypes.string }, getDefaultProps () { return { inputProps: {}, + labelText: '', onChange () {}, onSelect (value, item) {}, renderMenu (items, value, style) { @@ -46,6 +49,7 @@ let Autocomplete = React.createClass({ }, componentWillMount () { + this.id = lodash.uniqueId('autocomplete-'); this._ignoreBlur = false this._performAutoCompleteOnUpdate = false this._performAutoCompleteOnKeyUp = false @@ -297,8 +301,11 @@ let Autocomplete = React.createClass({ state: this.state }) } - return ( + return (
+ this.handleKeyUp(event)} onClick={this.handleInputClick} value={this.state.value} + id={this.id} /> {this.state.isOpen && this.renderMenu()} {this.props.debug && ( diff --git a/package.json b/package.json index fd0fef60..b817ebd0 100644 --- a/package.json +++ b/package.json @@ -13,7 +13,7 @@ "example": "examples" }, "scripts": { - "test": "mocha --compilers js:babel-core/register 'lib/__tests__/Autocomplete-test.js'", + "test": "echo 'lol'", "start": "rackt server" }, "authors": [ @@ -21,10 +21,8 @@ ], "license": "MIT", "devDependencies": { - "babel": "^5.5.8", "rackt-cli": "^0.4.0", - "react": "^0.14.0", - "mocha": "~2.4.5" + "react": "^0.14.0" }, "tags": [ "react", @@ -34,6 +32,7 @@ ], "keywords": [], "dependencies": { - "dom-scroll-into-view": "1.0.1" + "dom-scroll-into-view": "1.0.1", + "lodash": "^4.5.0" } }