refactor(gui): close dropdown on clicking outside, and avoid opening dropdown if expanded form is open

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

packages/nc-gui/components/cell/MultiSelect.vue

@@ -20,8 +20,10 @@ import {
   ref,
   useMetas,
   useProject,
+  useEventListener,
   useRoles,
   useSelectedCellKeyupListener,
+  isDrawerOrModalExist,
   watch,
 } from '#imports'
 import MdiCloseCircle from '~icons/mdi/close-circle'
@@ -186,7 +188,7 @@ useSelectedCellKeyupListener(active, (e) => {
         break
       }
       // toggle only if char key pressed
-      if (!(e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) && e.key?.length === 1) {
+      if (!(e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) && e.key?.length === 1 && !isDrawerOrModalExist()) {
         e.stopPropagation()
         isOpen.value = true
       }
@@ -283,6 +285,16 @@ onMounted(() => {
 onUnmounted(() => {
   cellClickHook?.on(cellClickHookHandler)
 })
+
+
+
+const handleClose = (e: MouseEvent) => {
+  if (isOpen.value && aselect.value && !aselect.value.$el.contains(e.target)) {
+    isOpen.value = false
+  }
+}
+
+useEventListener(document, 'click', handleClose, true)
 </script>
 
 <template>
@@ -414,7 +426,7 @@ onUnmounted(() => {
 }
 
 :deep(.ant-select-selection-overflow) {
-  @apply flex-nowrap;
+  @apply flex-nowrap overflow-hidden;
 }
 
 .nc-multi-select:not(.read-only) {

packages/nc-gui/components/cell/SingleSelect.vue

@@ -19,6 +19,7 @@ import {
   ref,
   useRoles,
   useSelectedCellKeyupListener,
+  isDrawerOrModalExist,
   watch,
 } from '#imports'
 
@@ -124,7 +125,7 @@ useSelectedCellKeyupListener(active, (e) => {
         break
       }
       // toggle only if char key pressed
-      if (!(e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) && e.key?.length === 1) {
+      if (!(e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) && e.key?.length === 1 && !isDrawerOrModalExist()) {
         e.stopPropagation()
         isOpen.value = true
       }
@@ -222,6 +223,14 @@ onMounted(() => {
 onUnmounted(() => {
   cellClickHook?.on(cellClickHookHandler)
 })
+
+const handleClose = (e: MouseEvent) => {
+  if (isOpen.value && aselect.value && !aselect.value.$el.contains(e.target)) {
+    isOpen.value = false
+  }
+}
+
+useEventListener(document, 'click', handleClose, true)
 </script>
 
 <template>