From 3bc404c42a9c619a947710cd747d63776667fd8a Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Sat, 28 Jan 2023 17:54:19 +0530
Subject: [PATCH] fix(gui): close invite modal on escape key press

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../tabs/auth/user-management/UsersModal.vue  | 11 ++++++
 .../useSelectedCellKeyupListener/index.ts     | 38 ++++++++++++-------
 2 files changed, 35 insertions(+), 14 deletions(-)

diff --git a/packages/nc-gui/components/tabs/auth/user-management/UsersModal.vue b/packages/nc-gui/components/tabs/auth/user-management/UsersModal.vue
index 0fa1d2fc81..bd8d5477bb 100644
--- a/packages/nc-gui/components/tabs/auth/user-management/UsersModal.vue
+++ b/packages/nc-gui/components/tabs/auth/user-management/UsersModal.vue
@@ -9,6 +9,7 @@ import {
   projectRoleTagColors,
   projectRoles,
   ref,
+  useActiveKeyupListener,
   useCopy,
   useDashboard,
   useI18n,
@@ -138,6 +139,16 @@ const clickInviteMore = () => {
 const emailField = (inputEl: typeof Input) => {
   inputEl?.$el?.focus()
 }
+
+useActiveKeyupListener(
+  computed(() => show),
+  (e: KeyboardEvent) => {
+    console.log(e.key)
+    if (e.key === 'Escape') {
+      emit('closed')
+    }
+  },
+)
 </script>
 
 <template>
diff --git a/packages/nc-gui/composables/useSelectedCellKeyupListener/index.ts b/packages/nc-gui/composables/useSelectedCellKeyupListener/index.ts
index e8e696b96a..da1eb4fa0a 100644
--- a/packages/nc-gui/composables/useSelectedCellKeyupListener/index.ts
+++ b/packages/nc-gui/composables/useSelectedCellKeyupListener/index.ts
@@ -1,21 +1,31 @@
 import { isClient } from '@vueuse/core'
 import type { Ref } from 'vue'
 
-export function useSelectedCellKeyupListener(selected: Ref<boolean>, handler: (e: KeyboardEvent) => void) {
+function useSelectedCellKeyupListener(
+  selected: Ref<boolean>,
+  handler: (e: KeyboardEvent) => void,
+  { immediate = false }: { immediate?: boolean } = {},
+) {
   if (isClient) {
-    watch(selected, (nextVal, _, cleanup) => {
-      // bind listener when `selected` is truthy
-      if (nextVal) {
-        document.addEventListener('keydown', handler, true)
-        // if `selected` is falsy then remove the event handler
-      } else {
-        document.removeEventListener('keydown', handler, true)
-      }
+    watch(
+      selected,
+      (nextVal: boolean, _: boolean, cleanup) => {
+        // bind listener when `selected` is truthy
+        if (nextVal) {
+          document.addEventListener('keydown', handler, true)
+          // if `selected` is falsy then remove the event handler
+        } else {
+          document.removeEventListener('keydown', handler, true)
+        }
 
-      // cleanup is called whenever the watcher is re-evaluated or stopped
-      cleanup(() => {
-        document.removeEventListener('keydown', handler, true)
-      })
-    })
+        // cleanup is called whenever the watcher is re-evaluated or stopped
+        cleanup(() => {
+          document.removeEventListener('keydown', handler, true)
+        })
+      },
+      { immediate },
+    )
   }
 }
+
+export { useSelectedCellKeyupListener, useSelectedCellKeyupListener as useActiveKeyupListener }