[www] Search shortcut (#3654)

* Add keyboard shortcut for focussing the search input

* Blur input on result selection

www/src/components/search-form.js

@@ -40,7 +40,7 @@ css.insert(`
     font-weight: normal !important;
     padding: ${rhythm(0.25)} ${rhythm(0.5)} !important;
   }
-  
+
   .algolia-autocomplete .algolia-docsearch-suggestion--subcategory-column:before {
     background: ${presets.veryLightPurple} !important;
   }
@@ -227,6 +227,8 @@ class SearchForm extends Component {
   constructor() {
     super()
     this.state = { enabled: true }
+    this.autocompleteSelected = this.autocompleteSelected.bind(this)
+    this.focusSearchInput = this.focusSearchInput.bind(this)
   }
 
   /**
@@ -241,9 +243,17 @@ class SearchForm extends Component {
     // eslint-disable-next-line no-undef
     const a = document.createElement(`a`)
     a.href = e._args[0].url
+    this.searchInput.blur()
     navigateTo(`${a.pathname}${a.hash}`)
   }
 
+  focusSearchInput(e) {
+   if (e.key !== `s`) return
+   if (document.activeElement === this.searchInput) return // eslint-disable-line no-undef
+   e.preventDefault()
+   this.searchInput.focus()
+  }
+
   componentDidMount() {
     if (
       typeof window === `undefined` || // eslint-disable-line no-undef
@@ -254,6 +264,9 @@ class SearchForm extends Component {
       return
     }
 
+    // eslint-disable-next-line no-undef
+    window.addEventListener(`keydown`, this.focusSearchInput)
+
     // eslint-disable-next-line no-undef
     window.addEventListener(
       `autocomplete:selected`,
@@ -270,6 +283,11 @@ class SearchForm extends Component {
     })
   }
 
+  componentWillUnmount() {
+    // eslint-disable-next-line no-undef
+    window.removeEventListener(`keydown`, this.focusSearchInput)
+  }
+
   render() {
     const { enabled } = this.state
     const { styles } = this.props.styles
@@ -320,6 +338,8 @@ class SearchForm extends Component {
           type="search"
           placeholder="Search docs"
           aria-label="Search docs"
+          title="Hit 's' to search docs"
+          ref={(input) => { this.searchInput = input }}
         />
       </form>
     ) : null