diff --git a/src/components/search_bar/search_bar.js b/src/components/search_bar/search_bar.js index 73dd3ca5..ee54afde 100644 --- a/src/components/search_bar/search_bar.js +++ b/src/components/search_bar/search_bar.js @@ -10,6 +10,12 @@ library.add( ) const SearchBar = { + mounted () { + window.addEventListener('keydown', this.autoFocus) + }, + beforeDestroy () { + window.removeEventListener('keydown', this.autoFocus) + }, data: () => ({ searchTerm: undefined, hidden: true, @@ -36,6 +42,36 @@ const SearchBar = { this.$refs.searchInput.focus() } }) + }, + autoFocus (event) { + if ( + event.target.tagName !== 'BODY' || + event.altKey || + event.ctrlKey || + event.isComposing || + event.metaKey || + event.repeat || + event.shiftKey + ) { + return + } + + if (event.key === '/') { + if (this.hidden) { + this.toggleHidden() + } else { + this.$refs.searchInput.focus() + } + event.preventDefault() + } else if (event.key === 'Escape') { + if (!this.hidden) { + this.toggleHidden() + } + event.preventDefault() + } + }, + blur () { + this.$refs.searchInput.blur() } } } diff --git a/src/components/search_bar/search_bar.vue b/src/components/search_bar/search_bar.vue index 872bff03..089a689e 100644 --- a/src/components/search_bar/search_bar.vue +++ b/src/components/search_bar/search_bar.vue @@ -27,6 +27,9 @@ @keydown.enter=" $event.isComposing || $event.keyCode === 229 || find(searchTerm) " + @keydown.escape=" + $event.isComposing || blur() + " >