feat(modal): close on 'Escape' key (#4433)

* feat(modal): close on 'Escape' key

* fix(modal): implement typescript

* fix(modal): listen to keydown

* fix(keybindinput): listen/focus on child element

* fix(modal): fix background glitch

Co-authored-by: Jason Woodland <me@jasonwoodland.com>

components/interactables/KeybindInput/KeybindInput.html

@@ -1,4 +1,9 @@
-<div class="keybind-input" v-click-outside="cancel">
+<div
+  class="keybind-input"
+  v-click-outside="cancel"
+  ref="container"
+  tabindex="-1"
+>
   <TypographyLabel :text="name" />
   <div class="control">
     <TypographyText v-if="!isListening && value === ''" class="info-label">

components/interactables/KeybindInput/KeybindInput.vue

@@ -90,6 +90,9 @@ export default Vue.extend({
     newKeybindString(): string {
       return this.newKeybind.join(separator).toLowerCase()
     },
+    container(): HTMLElement {
+      return this.$refs.container as HTMLElement
+    },
   },
   beforeDestroy() {
     this.removeKeybindListener()
@@ -121,13 +124,14 @@ export default Vue.extend({
       this.removeKeybindListener()
     },
     addKeybindListener() {
-      window.addEventListener('keydown', this.handleKeyEvent)
-      window.addEventListener('keyup', this.handleKeyEvent)
+      this.container.addEventListener('keydown', this.handleKeyEvent)
+      this.container.addEventListener('keyup', this.handleKeyEvent)
+      this.container.focus()
       this.isListening = true
     },
     removeKeybindListener() {
-      window.removeEventListener('keydown', this.handleKeyEvent)
-      window.removeEventListener('keyup', this.handleKeyEvent)
+      this.container.removeEventListener('keydown', this.handleKeyEvent)
+      this.container.removeEventListener('keyup', this.handleKeyEvent)
       this.isListening = false
       Object.assign(this.modifiers, initialModifiersState)
     },
@@ -144,7 +148,8 @@ export default Vue.extend({
       }
 
       if (this.activeModifiers.length === 0) {
-        const editButton = this.$refs.editButton as HTMLButtonElement
+        const editButton = (this.$refs.editButton as Vue)
+          ?.$el as HTMLButtonElement
         if (event.keyCode === 13) {
           this.save()
           editButton.focus()

components/ui/Modal/Modal.html

@@ -1,9 +1,5 @@
 <div class="container">
-  <div
-    class="modal"
-    :class="{small: small}"
-    v-click-outside="() => $emit('close')"
-  >
+  <div class="modal" :class="{small: small}" v-click-outside="close">
     <TypographyTitle v-if="title" :text="title" :size="6" />
     <slot />
   </div>

components/ui/Modal/Modal.vue

@@ -1,6 +1,6 @@
 <template src="./Modal.html"></template>
 
-<script>
+<script lang="ts">
 import Vue from 'vue'
 
 export default Vue.extend({
@@ -15,6 +15,28 @@ export default Vue.extend({
       default: false,
     },
   },
+  created() {
+    this.addEventListener()
+  },
+  beforeDestroy() {
+    this.removeEventListener()
+  },
+  methods: {
+    close() {
+      this.$emit('close')
+    },
+    handleKeydown(event: KeyboardEvent) {
+      if (event.key === 'Escape') {
+        this.close()
+      }
+    },
+    addEventListener() {
+      document.addEventListener('keydown', this.handleKeydown)
+    },
+    removeEventListener() {
+      document.removeEventListener('keydown', this.handleKeydown)
+    },
+  },
 })
 </script>
 

layouts/desktop.vue

@@ -101,6 +101,8 @@ export default Vue.extend({
   inset: 0;
   position: absolute;
   transition: left @animation-speed-long ease;
+  /* background required for modal backdrop-filter to work properly */
+  background: @background;
 
   &.hide-sidebars {
     left: calc(calc(@sidebar-width + @slimbar-width) * -1);