Hide software keyboard in topbar search

src/components/LocationAutocompleteInput/LocationAutocompleteInput.js

@@ -382,6 +382,7 @@ class LocationAutocompleteInput extends Component {
       placeholder,
       input,
       meta,
+      inputRef,
     } = this.props;
     const { name, onFocus } = input;
     const { search, predictions } = currentValue(this.props);
@@ -421,6 +422,7 @@ class LocationAutocompleteInput extends Component {
           onBlur={this.handleOnBlur}
           onChange={this.onChange}
           onKeyDown={this.onKeyDown}
+          ref={inputRef}
         />
         {renderPredictions ? (
           <LocationPredictionsList
@@ -448,6 +450,7 @@ LocationAutocompleteInput.defaultProps = {
   validClassName: null,
   placeholder: '',
   meta: null,
+  inputRef: null,
 };
 
 LocationAutocompleteInput.propTypes = {
@@ -475,6 +478,7 @@ LocationAutocompleteInput.propTypes = {
     valid: bool.isRequired,
     touched: bool.isRequired,
   }),
+  inputRef: func,
 };
 
 export default LocationAutocompleteInput;

src/containers/SearchPage/__snapshots__/SearchPage.test.js.snap

@@ -41,14 +41,17 @@ exports[`SearchPageComponent matches snapshot 1`] = `
                 Object {
                   "count": 22,
                 }
-              } />
+              }
+            />
           </h2>
         </div>
         <div
-          onClick={[Function]}>
+          onClick={[Function]}
+        >
           <FormattedMessage
             id="SearchPage.openMapView"
-            values={Object {}} />
+            values={Object {}}
+          />
         </div>
       </div>
       <div
@@ -66,7 +69,8 @@ exports[`SearchPageComponent matches snapshot 1`] = `
             }
           }
           rootClassName={null}
-          search={Object {}} />
+          search={Object {}}
+        />
       </div>
     </div>
     <withViewport(ModalInMobileComponent)

src/containers/TopbarSearchForm/TopbarSearchForm.js

@@ -1,4 +1,4 @@
-import React, { PropTypes } from 'react'; // eslint-disable-line react/no-deprecated
+import React, { Component, PropTypes } from 'react'; // eslint-disable-line react/no-deprecated
 import { compose } from 'redux';
 import { Field, reduxForm, propTypes as formPropTypes } from 'redux-form';
 import { intlShape, injectIntl } from 'react-intl';
@@ -7,43 +7,58 @@ import { Form, LocationAutocompleteInput } from '../../components';
 
 import css from './TopbarSearchForm.css';
 
-const TopbarSearchFormComponent = props => {
-  const { rootClassName, className, desktopInputRoot, intl, onSubmit, isMobile } = props;
+class TopbarSearchFormComponent extends Component {
+  constructor(props) {
+    super(props);
+    this.onChange = this.onChange.bind(this);
+    this.searchInput = null;
+  }
 
-  const onChange = location => {
+  onChange(location) {
     if (location.selectedPlace) {
       // Note that we use `onSubmit` instead of the conventional
       // `handleSubmit` prop for submitting. We want to autosubmit
       // when a place is selected, and don't require any extra
       // validations for the form.
-      onSubmit({ location });
+      this.props.onSubmit({ location });
+      // blur search input to hide software keyboard
+      if (this.searchInput) {
+        this.searchInput.blur();
+      }
     }
-  };
+  }
 
-  const classes = classNames(rootClassName, className);
-  const desktopInputRootClass = desktopInputRoot || css.desktopInputRoot;
+  render() {
+    const { rootClassName, className, desktopInputRoot, intl, isMobile } = this.props;
 
-  // Allow form submit only when the place has changed
-  const preventFormSubmit = e => e.preventDefault();
+    const classes = classNames(rootClassName, className);
+    const desktopInputRootClass = desktopInputRoot || css.desktopInputRoot;
 
-  return (
-    <Form className={classes} onSubmit={preventFormSubmit}>
-      <Field
-        name="location"
-        label="Location"
-        className={isMobile ? css.mobileInputRoot : desktopInputRootClass}
-        iconClassName={isMobile ? css.mobileIcon : css.desktopIcon}
-        inputClassName={isMobile ? css.mobileInput : css.desktopInput}
-        predictionsClassName={isMobile ? css.mobilePredictions : css.desktopPredictions}
-        placeholder={intl.formatMessage({ id: 'TopbarSearchForm.placeholder' })}
-        format={null}
-        component={LocationAutocompleteInput}
-        closeOnBlur={!isMobile}
-        onChange={onChange}
-      />
-    </Form>
-  );
-};
+    // Allow form submit only when the place has changed
+    const preventFormSubmit = e => e.preventDefault();
+
+    return (
+      <Form className={classes} onSubmit={preventFormSubmit}>
+        <Field
+          name="location"
+          label="Location"
+          className={isMobile ? css.mobileInputRoot : desktopInputRootClass}
+          iconClassName={isMobile ? css.mobileIcon : css.desktopIcon}
+          inputClassName={isMobile ? css.mobileInput : css.desktopInput}
+          predictionsClassName={isMobile ? css.mobilePredictions : css.desktopPredictions}
+          placeholder={intl.formatMessage({ id: 'TopbarSearchForm.placeholder' })}
+          format={null}
+          component={LocationAutocompleteInput}
+          closeOnBlur={!isMobile}
+          onChange={this.onChange}
+          inputRef={node => {
+            this.searchInput = node;
+          }}
+        />
+      </Form>
+    );
+  }
+}
 
 const { func, string, bool } = PropTypes;