From 6e939bbe62aeabcdf35005f9b43a22fcc6f56404 Mon Sep 17 00:00:00 2001
From: Fabio Manganiello <fabio@manganiello.tech>
Date: Fri, 5 May 2023 20:46:42 +0200
Subject: [PATCH] Close modals and dropdown when ESC is pressed.

---
 .../backend/http/webapp/src/components/Modal.vue  | 15 ++++++++++++++-
 .../webapp/src/components/elements/Dropdown.vue   | 15 +++++++++++++++
 2 files changed, 29 insertions(+), 1 deletion(-)

diff --git a/platypush/backend/http/webapp/src/components/Modal.vue b/platypush/backend/http/webapp/src/components/Modal.vue
index 896cf1344..03896a243 100644
--- a/platypush/backend/http/webapp/src/components/Modal.vue
+++ b/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) {
diff --git a/platypush/backend/http/webapp/src/components/elements/Dropdown.vue b/platypush/backend/http/webapp/src/components/elements/Dropdown.vue
index 025a23620..35bb09b08 100644
--- a/platypush/backend/http/webapp/src/components/elements/Dropdown.vue
+++ b/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>