fix(SearchBox): Adds inputId prop to SearchBox (#3074)

Author: joshpensky

packages/react-instantsearch-dom/src/components/SearchBox.js

@@ -86,6 +86,7 @@ class SearchBox extends Component {
       PropTypes.func,
       PropTypes.exact({ current: PropTypes.object }),
     ]),
+    inputId: PropTypes.string,
   };
 
   static defaultProps = {
@@ -221,6 +222,7 @@ class SearchBox extends Component {
   render() {
     const {
       className,
+      inputId,
       translate,
       autoFocus,
       loadingIndicator,
@@ -257,6 +259,7 @@ class SearchBox extends Component {
         >
           <input
             ref={this.onInputMount}
+            id={inputId}
             type="search"
             placeholder={translate('placeholder')}
             autoFocus={autoFocus}

packages/react-instantsearch-dom/src/components/__tests__/SearchBox.js

@@ -25,6 +25,14 @@ describe('SearchBox', () => {
     instance.unmount();
   });
 
+  it('applies its default props with custom inputId', () => {
+    const inputId = 'search-box';
+    const wrapper = mount(<SearchBox inputId={inputId} refine={() => null} />);
+
+    const input = wrapper.find('input').getDOMNode();
+    expect(input.getAttribute('id')).toEqual(inputId);
+  });
+
   it('transfers the autoFocus prop to the underlying input element', () => {
     const instance = renderer.create(
       <SearchBox refine={() => null} autoFocus />

packages/react-instantsearch-dom/src/widgets/SearchBox.js

@@ -15,6 +15,7 @@ import SearchBox from '../components/SearchBox';
  * @propType {node} [reset] - Change the apparence of the default reset button (cross).
  * @propType {node} [loadingIndicator] - Change the apparence of the default loading indicator (spinning circle).
  * @propType {string} [defaultRefinement] - Provide default refinement value when component is mounted.
+ * @propType {string} [inputId] - The id of the search input
  * @propType {boolean} [showLoadingIndicator=false] - Display that the search is loading. This only happens after a certain amount of time to avoid a blinking effect. This timer can be configured with `stalledSearchDelay` props on <InstantSearch>. By default, the value is 200ms.
  * @themeKey ais-SearchBox - the root div of the widget
  * @themeKey ais-SearchBox-form - the wrapping form