feat(search): focus input when user start typing

client/src/components/Form/SearchForm.vue

@@ -105,15 +105,16 @@ export default {
       const header = document.querySelector('.header div')
       // Search Dropdown open
       if (newVal) {
-        console.log(this.getScrollbarWidth())
         if (!this.homepage) {
           document.body.style.marginLeft = `-${this.getScrollbarWidth()}px`
           header.style.paddingRight = `${this.getScrollbarWidth()}px`
         }
         document.body.style.overflow = 'hidden'
       } else {
+        if (!this.homepage) {
+          header.style.paddingRight = 0
+        }
         document.body.style.marginLeft = 0
-        header.style.paddingRight = 0
         document.body.style.overflow = 'auto'
       }
     },
@@ -128,12 +129,12 @@ export default {
       this.summoner = this.$route.params.name
     }
     window.addEventListener('blur', this.windowBlur)
-    document.addEventListener('keydown', this.handleEscape)
+    window.addEventListener('keydown', this.handleEscape)
   },
 
   beforeDestroy() {
     window.removeEventListener('blur', this.windowBlur)
-    document.removeEventListener('keydown', this.handleEscape)
+    window.removeEventListener('keydown', this.handleEscape)
   },
 
   methods: {

client/src/components/Form/SearchFormDropdown.vue

@@ -12,6 +12,7 @@
             </svg>
           </button>
           <input
+            ref="input"
             @input="$emit('input', $event.target.value)"
             :value="value"
             class="w-full px-12 py-2 pr-4 placeholder-blue-200 placeholder-opacity-75 bg-blue-700 border border-blue-500 rounded-md outline-none focus:bg-blue-760"
@@ -37,8 +38,6 @@
             </div>
             <div
               ref="searches"
-              @keydown.prevent.up="onArrowUp()"
-              @keydown.prevent.down="onArrowDown()"
               @keydown.prevent.stop.enter="onOptionSelect()"
               @keydown.prevent.stop.space="onOptionSelect()"
               role="listbox"
@@ -71,8 +70,6 @@
             <div class="text-base text-blue-100">Favorites</div>
             <div
               ref="favorites"
-              @keydown.prevent.up="onArrowUp()"
-              @keydown.prevent.down="onArrowDown()"
               @keydown.prevent.stop.enter="onOptionSelect()"
               @keydown.prevent.stop.space="onOptionSelect()"
               role="listbox"
@@ -144,6 +141,7 @@ export default {
 
   data() {
     return {
+      bypassKeys: ['Esc', 'Escape', 'ArrowUp', 'ArrowDown', 'Enter', 'Space', '/'],
       favoritesCount: null,
       totalCount: null,
       recentSearchesCount: null,
@@ -163,6 +161,7 @@ export default {
 
   created() {
     window.addEventListener('mousedown', this.handleClick)
+    window.addEventListener('keydown', this.handleKeyDown)
   },
 
   mounted() {
@@ -178,6 +177,7 @@ export default {
 
   beforeDestroy() {
     window.removeEventListener('mousedown', this.handleClick)
+    window.removeEventListener('keydown', this.handleKeyDown)
   },
 
   methods: {
@@ -204,6 +204,24 @@ export default {
       e.preventDefault()
       this.$refs.searches.focus()
     },
+    handleKeyDown(e) {
+      if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
+        e.preventDefault()
+        this.$refs.searches.focus()
+        if (e.key === 'ArrowUp') {
+          this.onArrowUp()
+        } else {
+          this.onArrowDown()
+        }
+      }
+
+      if (this.bypassKeys.includes(e.key) ||
+        (e.key === 'k' && (e.ctrlKey || e.metaKey))) {
+        return
+      }
+
+      this.$refs.input.focus()
+    },
     onArrow() {
       const scrollIntoBlock = this.selected === 1 ? 'end' : 'nearest'
       if (this.selected > this.recentSearchesCount) {