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,9 +1,15 @@
 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(
+      selected,
+      (nextVal: boolean, _: boolean, cleanup) => {
         // bind listener when `selected` is truthy
         if (nextVal) {
           document.addEventListener('keydown', handler, true)
@@ -16,6 +22,10 @@ export function useSelectedCellKeyupListener(selected: Ref<boolean>, handler: (e
         cleanup(() => {
           document.removeEventListener('keydown', handler, true)
         })
-    })
+      },
+      { immediate },
+    )
   }
 }
+
+export { useSelectedCellKeyupListener, useSelectedCellKeyupListener as useActiveKeyupListener }