Close modals and dropdown when ESC is pressed.

platypush/backend/http/webapp/src/components/Modal.vue

@@ -1,5 +1,6 @@
 <template>
-  <div class="modal-container fade-in" :id="id" :class="{hidden: !isVisible}" :style="{'--z-index': zIndex}" @click="close">
+  <div class="modal-container fade-in" :id="id" :class="{hidden: !isVisible}"
+    :style="{'--z-index': zIndex}" @click="close">
     <div class="modal" :class="$attrs.class">
       <div class="content" :style="{'--width': width, '--height': height}" @click="$event.stopPropagation()">
         <div class="header" v-if="title">
@@ -94,6 +95,13 @@ export default {
       else
         this.show()
     },
+
+    onKeyUp(event) {
+      event.stopPropagation()
+      if (event.key === 'Escape') {
+        this.close()
+      }
+    },
   },
 
   mounted() {
@@ -107,10 +115,15 @@ export default {
       self.isVisible = visible
     }
 
+    document.body.addEventListener('keyup', this.onKeyUp)
     this.$watch(() => this.visible, visibleHndl)
     this.$watch(() => this.isVisible, visibleHndl)
   },
 
+  unmounted() {
+    document.body.removeEventListener('keyup', this.onKeyUp)
+  },
+
   updated() {
     this.prevVisible = this.isVisible
     if (this.isVisible) {

platypush/backend/http/webapp/src/components/elements/Dropdown.vue

@@ -94,6 +94,21 @@ export default {
       this.$emit('click')
       this.visible ? this.close() : this.open()
     },
+
+    onKeyUp(event) {
+      event.stopPropagation()
+      if (event.key === 'Escape') {
+        this.close()
+      }
+    },
+  },
+
+  mounted() {
+    document.body.addEventListener('keyup', this.onKeyUp)
+  },
+
+  unmounted() {
+    document.body.removeEventListener('keyup', this.onKeyUp)
   },
 }
 </script>