From 1a8764fe2fa3d17e53a2554c46481211a09d8f35 Mon Sep 17 00:00:00 2001
From: elizachi <chigvintseva.elizaveta@gmail.com>
Date: Sun, 21 Jul 2024 00:21:51 +0300
Subject: [PATCH] Added close on esc button

---
 codex-ui/src/vue/components/popup/Popup.vue | 22 ++++++++++++++++++++-
 1 file changed, 21 insertions(+), 1 deletion(-)

diff --git a/codex-ui/src/vue/components/popup/Popup.vue b/codex-ui/src/vue/components/popup/Popup.vue
index 00d12901..4d76e166 100644
--- a/codex-ui/src/vue/components/popup/Popup.vue
+++ b/codex-ui/src/vue/components/popup/Popup.vue
@@ -23,7 +23,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue';
+import { ref, onMounted, onUnmounted } from 'vue';
 import Icon from '../icon/Icon.vue';
 import { usePopup } from './usePopup';
 import { onClickOutside } from '@vueuse/core';
@@ -45,6 +45,18 @@ const {
  */
 onClickOutside(popupEl, hidePopup);
 
+/**
+ * Close the popup when esc was pressed
+ *
+ * @param event - the event object representing the keyboard event
+ * @param event.key - the property of the event object that holds the value of the pressed key
+ */
+const closeOnEsc = (event: { key: string }) => {
+  if (event.key === 'Escape') {
+    hidePopup();
+  }
+};
+
 withDefaults(
   defineProps<{
     /**
@@ -57,6 +69,14 @@ withDefaults(
   }
 );
 
+onMounted(() => {
+  document.addEventListener('keydown', closeOnEsc);
+});
+
+onUnmounted(() => {
+  document.removeEventListener('keydown', closeOnEsc);
+});
+
 </script>
 
 <style module>