Merge master and fix the examples

Author: bfink13

examples/async-data/app.js

@@ -24,10 +24,9 @@ let App = React.createClass({
           attempt to autocomplete the first one.
         </p>
 
+        <label htmlFor="states-autocomplete">Choose a state from the US</label>
         <Autocomplete
-          id="state-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,11 +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
-          id="state-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

@@ -16,11 +16,10 @@ let App = React.createClass({
           so <code>Autocomplete</code> has methods baked in to help.
         </p>
 
+        <label htmlFor="states-autocomplete">Choose a state from the US</label>
         <Autocomplete
-          id="state-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

@@ -13,12 +13,18 @@ let Autocomplete = React.createClass({
     renderItem: React.PropTypes.func.isRequired,
     menuStyle: React.PropTypes.object,
     inputProps: React.PropTypes.object,
-    labelText: React.PropTypes.string
+    labelText: React.PropTypes.string,
+    wrapperProps: React.PropTypes.object,
+    wrapperStyle: React.PropTypes.object
   },
 
   getDefaultProps () {
     return {
       value: '',
+      wrapperProps: {},
+      wrapperStyle: {
+        display: 'inline-block'
+      },
       inputProps: {},
       labelText: '',
       onChange () {},
@@ -81,9 +87,18 @@ let Autocomplete = React.createClass({
     if (this.keyDownHandlers[event.key])
       this.keyDownHandlers[event.key].call(this, event)
     else {
+      const { selectionStart, value } = event.target
+      if (value === this.state.value)
+        // Nothing changed, no need to do anything. This also prevents
+        // our workaround below from nuking user-made selections
+        return
       this.setState({
         highlightedIndex: null,
         isOpen: true
+      }, () => {
+        // Restore caret position before autocompletion process
+        // to work around a setSelectionRange bug in IE (#80)
+        this.refs.input.selectionStart = selectionStart
       })
     }
   },
@@ -298,7 +313,7 @@ let Autocomplete = React.createClass({
     }
 
     return ( 
-      <div style={{display: 'inline-block'}}>
+      <div style={{...this.props.wrapperStyle}} {...this.props.wrapperProps}>
         <input
           {...this.props.inputProps}
           role="combobox"