Remove lodash dependency and hardcoded input label

Author: bfink13

examples/async-data/app.js

@@ -16,17 +16,15 @@ 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>
-
+        <label htmlFor="states-autocomplete">Choose a state from the US</label>
         <Autocomplete
-          labelText="Choose a state from the US"
-          inputProps={{name: "US state"}}
+          inputProps={{name: "US state", id: "states-autocomplete"}}
           ref="autocomplete"
           value={this.state.value}
           items={this.state.unitedStates}

examples/custom-menu/app.js

@@ -21,10 +21,10 @@ let App = React.createClass({
           look as well as the rendering of it. In this case we put headers for each
           letter of the alphabet.
         </p>
+        <label htmlFor="states-autocomplete">Choose a state from the US</label>
         <Autocomplete
           value={this.state.value}
-          labelText="Choose a state from the US"
-          inputProps={{name: "US state"}}
+          inputProps={{name: "US state", id: "states-autocomplete"}}
           items={this.state.unitedStates}
           getItemValue={(item) => item.name}
           onSelect={value => this.setState({ value, unitedStates: [] }) }

examples/static-data/app.js

@@ -10,16 +10,14 @@ let App = React.createClass({
     return (
       <div>
         <h1>Basic Example with Static Data</h1>
-
         <p>
           When using static data, you use the client to sort and filter the items,
           so <code>Autocomplete</code> has methods baked in to help.
         </p>
-
+        <label htmlFor="states-autocomplete">Choose a state from the US</label>
         <Autocomplete
           value={this.state.value}
-          labelText="Choose a state from the US"
-          inputProps={{name: "US state"}}
+          inputProps={{name: "US state", id: "states-autocomplete"}}
           items={getStates()}
           getItemValue={(item) => item.name}
           shouldItemRender={matchStateToTerm}

lib/Autocomplete.js

@@ -1,5 +1,4 @@
 const React = require('react')
-const lodash = require('lodash')
 const scrollIntoView = require('dom-scroll-into-view')
 
 let _debugStates = []
@@ -49,7 +48,6 @@ let Autocomplete = React.createClass({
   },
 
   componentWillMount () {
-    this.id = lodash.uniqueId('autocomplete-'); 
     this._ignoreBlur = false
     this._performAutoCompleteOnUpdate = false
     this._performAutoCompleteOnKeyUp = false
@@ -298,11 +296,9 @@ let Autocomplete = React.createClass({
         state: this.state
       })
     }
+
     return ( 
       <div style={{display: 'inline-block'}}>
-        <label htmlFor={this.id} ref="label">
-          {this.props.labelText}
-        </label>
         <input
           {...this.props.inputProps}
           role="combobox"
@@ -315,7 +311,6 @@ let Autocomplete = React.createClass({
           onKeyUp={(event) => this.handleKeyUp(event)}
           onClick={this.handleInputClick}
           value={this.props.value}
-          id={this.id}
         />
         {this.state.isOpen && this.renderMenu()}
         {this.props.debug && (

package.json

@@ -48,7 +48,6 @@
   "dependencies": {
     "babel-preset-es2015": "^6.5.0",
     "dom-scroll-into-view": "1.0.1",
-    "lodash": "^4.5.0",
     "react": "^0.14.7",
     "react-dom": "^0.14.7"
   }