fix(gui): close invite modal on escape key press

Signed-off-by: Pranav C <pranavxc@gmail.com>

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>

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) => {
+    watch(
-      // bind listener when `selected` is truthy
+      selected,
-      if (nextVal) {
+      (nextVal: boolean, _: boolean, cleanup) => {
-        document.addEventListener('keydown', handler, true)
+        // bind listener when `selected` is truthy
-        // if `selected` is falsy then remove the event handler
+        if (nextVal) {
-      } else {
+          document.addEventListener('keydown', handler, true)
-        document.removeEventListener('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 is called whenever the watcher is re-evaluated or stopped
-      cleanup(() => {
+        cleanup(() => {
-        document.removeEventListener('keydown', handler, true)
+          document.removeEventListener('keydown', handler, true)
-      })
+        })
-    })
+      },
+      { immediate },
+    )
   }
 }
+
+export { useSelectedCellKeyupListener, useSelectedCellKeyupListener as useActiveKeyupListener }