diff --git a/www/src/components/search-form.js b/www/src/components/search-form.js index 2a8c43a2a09e8..277a9ec83b327 100644 --- a/www/src/components/search-form.js +++ b/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 }} /> ) : null