From 122f9141d18d64fe3a89d6a9bb6c8ccd8a30223f Mon Sep 17 00:00:00 2001
From: Daniel Falk <danielfalk22@gmail.com>
Date: Mon, 11 Apr 2016 16:38:11 -0400
Subject: [PATCH] Include an 'id' prop

Add an 'id' prop to the component so that the id used for accessibility
can be managed externally if necessary.  At the moment, it is needed for
universal applications.

This prop is optional and will default to the old method of
autogenerating the identifier if one is not supplied.
---
 examples/async-data/app.js         | 6 ++++++
 lib/Autocomplete.js                | 3 ++-
 lib/__tests__/Autocomplete-test.js | 7 +++++++
 3 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/examples/async-data/app.js b/examples/async-data/app.js
index 05a149ed..374a1e56 100644
--- a/examples/async-data/app.js
+++ b/examples/async-data/app.js
@@ -24,6 +24,11 @@ let App = React.createClass({
           attempt to autocomplete the first one.
         </p>
 
+        {/*
+          Note that the 'id' prop is optional, but if you intend to use this
+          component in a universal (isomorphic) application, omitting it will
+          probably cause a server-client mismatch.
+        */}
         <Autocomplete
           labelText="Choose a state from the US"
           inputProps={{name: "US state"}}
@@ -31,6 +36,7 @@ let App = React.createClass({
           value={this.state.value}
           items={this.state.unitedStates}
           getItemValue={(item) => item.name}
+          id="autocomplete-us-state"
           onSelect={(value, item) => {
             // set the menu to only the selected item
             this.setState({ value, unitedStates: [ item ] })
diff --git a/lib/Autocomplete.js b/lib/Autocomplete.js
index fd25a96d..257e7093 100644
--- a/lib/Autocomplete.js
+++ b/lib/Autocomplete.js
@@ -8,6 +8,7 @@ let Autocomplete = React.createClass({
 
   propTypes: {
     value: React.PropTypes.any,
+    id: React.PropTypes.string,
     onChange: React.PropTypes.func,
     onSelect: React.PropTypes.func,
     shouldItemRender: React.PropTypes.func,
@@ -55,7 +56,7 @@ let Autocomplete = React.createClass({
   },
 
   componentWillMount () {
-    this.id = lodash.uniqueId('autocomplete-'); 
+    this.id = this.props.id || lodash.uniqueId('autocomplete-'); 
     this._ignoreBlur = false
     this._performAutoCompleteOnUpdate = false
     this._performAutoCompleteOnKeyUp = false
diff --git a/lib/__tests__/Autocomplete-test.js b/lib/__tests__/Autocomplete-test.js
index f35a04fd..d0d3c57c 100644
--- a/lib/__tests__/Autocomplete-test.js
+++ b/lib/__tests__/Autocomplete-test.js
@@ -18,6 +18,7 @@ function AutocompleteComponentJSX (extraProps) {
       labelText="Choose a state from the US"
       inputProps={{name: "US state"}}
       getItemValue={(item) => item.name}
+      id="autocomplete-us-state"
       items={getStates()}
       renderItem={(item, isHighlighted) => (
         <div
@@ -66,6 +67,12 @@ describe('Autocomplete acceptance tests', () => {
 
   });
 
+  it('should use the id prop, if supplied', () => {
+
+    expect(autocompleteWrapper.instance().id).to.equal('autocomplete-us-state');
+
+  });
+
 });
 
 // Event handler unit tests