feat: handle ESC key to close dropdowns

client/src/components/Form/SearchForm.vue

@@ -1,6 +1,5 @@
 <template>
   <form @submit.prevent="formSubmit" :class="formClasses" class="flex text-teal-100 text-lg w-full">
-    <div v-if="dropdown" @click="dropdown = false" class="fixed z-20 inset-0"></div>
     <div class="relative w-full">
       <button
         ref="submit"
@@ -24,6 +23,7 @@
         <SearchFormDropdown v-if="selected" @click-dropdown="clickDropdown = true" />
       </transition>
 
+      <div ref="region-dropdown">
         <div
           :class="{'mr-12': size === 'xl'}"
           class="absolute right-0 z-30 vertical-center flex items-center h-full"
@@ -50,7 +50,7 @@
               :key="region"
               @click="updateSettings({name: 'region', value: region.toLowerCase()})"
               :class="classRegions(index)"
-            class="relative pr-2 pl-5 py-1 text-xs text-right bg-blue-1000 hover:bg-blue-800"
+              class="relative pr-2 pl-5 py-1 text-xs text-right bg-blue-1000 select-none hover:bg-blue-800"
             >
               <svg
                 v-if="region.toLowerCase() === selectedRegion"
@@ -67,6 +67,7 @@
           </div>
         </transition>
       </div>
+    </div>
   </form>
 </template>
 
@@ -151,16 +152,17 @@ export default {
     if (!this.summoner.length) {
       this.summoner = this.$route.params.name
     }
-  },
-
-  mounted() {
     window.addEventListener('mousedown', this.globalClick)
     window.addEventListener('blur', this.windowBlur)
+    document.addEventListener('click', this.clickOutsideRegionDropdown)
+    document.addEventListener('keydown', this.handleEscape)
   },
 
   beforeDestroy() {
     window.removeEventListener('mousedown', this.globalClick)
     window.removeEventListener('blur', this.windowBlur)
+    document.removeEventListener('click', this.clickOutsideRegionDropdown)
+    document.removeEventListener('keydown', this.handleEscape)
   },
 
   methods: {
@@ -170,6 +172,13 @@ export default {
         'rounded-b': index === this.regions.length - 1
       }
     },
+    clickOutsideRegionDropdown(e) {
+      e.stopPropagation()
+      if (e.target === this.$refs['region-dropdown'] || this.$refs['region-dropdown'].contains(e.target)) {
+        return
+      }
+      this.dropdown = false
+    },
     formSubmit() {
       const search = this.summoner.split(' ').join('')
       if (search.length) {
@@ -183,6 +192,12 @@ export default {
       }
       this.clickDropdown = false
     },
+    handleEscape(e) {
+      if (e.key === 'Esc' || e.key === 'Escape') {
+        this.dropdown = false
+        this.selected = false
+      }
+    },
     windowBlur() {
       this.selected = false
     },