From 887269d5c1a42be92c5ddc6c6e2aa84870af4c25 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Sat, 28 Jan 2023 12:58:26 +0530
Subject: [PATCH 01/22] fix(gui): single select cell related bugs

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../nc-gui/components/cell/SingleSelect.vue   | 99 ++++++++++---------
 packages/nc-gui/composables/useProject.ts     |  2 +-
 2 files changed, 51 insertions(+), 50 deletions(-)

diff --git a/packages/nc-gui/components/cell/SingleSelect.vue b/packages/nc-gui/components/cell/SingleSelect.vue
index 149e9764c9..03dc439583 100644
--- a/packages/nc-gui/components/cell/SingleSelect.vue
+++ b/packages/nc-gui/components/cell/SingleSelect.vue
@@ -192,57 +192,58 @@ const toggleMenu = (e: Event) => {
 </script>
 
 <template>
-  <a-select
-    ref="aselect"
-    v-model:value="vModel"
-    class="w-full"
-    :class="{ 'caret-transparent': !hasEditRoles }"
-    :allow-clear="!column.rqd && editAllowed"
-    :bordered="false"
-    :open="isOpen"
-    :disabled="readOnly"
-    :show-arrow="hasEditRoles && !readOnly && (editable || (active && vModel === null))"
-    :dropdown-class-name="`nc-dropdown-single-select-cell ${isOpen ? 'active' : ''}`"
-    show-search
-    @select="isOpen = false"
-    @keydown.stop
-    @search="search"
-    @click="toggleMenu"
-  >
-    <a-select-option
-      v-for="op of options"
-      :key="op.title"
-      :value="op.title"
-      :data-testid="`select-option-${column.title}-${rowIndex}`"
-      @click.stop
+  <div class="h-full w-full flex items-center" @click="toggleMenu">
+    <a-select
+      ref="aselect"
+      v-model:value="vModel"
+      class="w-full"
+      :class="{ 'caret-transparent': !hasEditRoles }"
+      :allow-clear="!column.rqd && editAllowed"
+      :bordered="false"
+      :open="isOpen && (active || editable)"
+      :disabled="readOnly"
+      :show-arrow="hasEditRoles && !readOnly && (editable || (active && vModel === null))"
+      :dropdown-class-name="`nc-dropdown-single-select-cell ${isOpen ? 'active' : ''}`"
+      :show-search="isOpen && (active || editable)"
+      @select="isOpen = false"
+      @keydown.stop
+      @search="search"
     >
-      <a-tag class="rounded-tag" :color="op.color">
-        <span
-          :style="{
-            'color': tinycolor.isReadable(op.color || '#ccc', '#fff', { level: 'AA', size: 'large' })
-              ? '#fff'
-              : tinycolor.mostReadable(op.color || '#ccc', ['#0b1d05', '#fff']).toHex8String(),
-            'font-size': '13px',
-          }"
-          :class="{ 'text-sm': isKanban }"
-        >
-          {{ op.title }}
-        </span>
-      </a-tag>
-    </a-select-option>
-    <a-select-option
-      v-if="searchVal && isOptionMissing && !isPublic && (hasRole('owner', true) || hasRole('creator', true))"
-      :key="searchVal"
-      :value="searchVal"
-    >
-      <div class="flex gap-2 text-gray-500 items-center h-full">
-        <MdiPlusThick class="min-w-4" />
-        <div class="text-xs whitespace-normal">
-          Create new option named <strong>{{ searchVal }}</strong>
+      <a-select-option
+        v-for="op of options"
+        :key="op.title"
+        :value="op.title"
+        :data-testid="`select-option-${column.title}-${rowIndex}`"
+        @click.stop
+      >
+        <a-tag class="rounded-tag" :color="op.color">
+          <span
+            :style="{
+              'color': tinycolor.isReadable(op.color || '#ccc', '#fff', { level: 'AA', size: 'large' })
+                ? '#fff'
+                : tinycolor.mostReadable(op.color || '#ccc', ['#0b1d05', '#fff']).toHex8String(),
+              'font-size': '13px',
+            }"
+            :class="{ 'text-sm': isKanban }"
+          >
+            {{ op.title }}
+          </span>
+        </a-tag>
+      </a-select-option>
+      <a-select-option
+        v-if="searchVal && isOptionMissing && !isPublic && (hasRole('owner', true) || hasRole('creator', true))"
+        :key="searchVal"
+        :value="searchVal"
+      >
+        <div class="flex gap-2 text-gray-500 items-center h-full">
+          <MdiPlusThick class="min-w-4" />
+          <div class="text-xs whitespace-normal">
+            Create new option named <strong>{{ searchVal }}</strong>
+          </div>
         </div>
-      </div>
-    </a-select-option>
-  </a-select>
+      </a-select-option>
+    </a-select>
+  </div>
 </template>
 
 <style scoped lang="scss">
diff --git a/packages/nc-gui/composables/useProject.ts b/packages/nc-gui/composables/useProject.ts
index 79f07105a0..f0791dbb43 100644
--- a/packages/nc-gui/composables/useProject.ts
+++ b/packages/nc-gui/composables/useProject.ts
@@ -1,7 +1,6 @@
 import type { BaseType, OracleUi, ProjectType, TableType } from 'nocodb-sdk'
 import { SqlUiFactory } from 'nocodb-sdk'
 import { isString } from '@vueuse/core'
-import { useRoute } from 'vue-router'
 import {
   ClientType,
   computed,
@@ -12,6 +11,7 @@ import {
   useInjectionState,
   useNuxtApp,
   useRoles,
+  useRoute,
   useRouter,
   useTheme,
 } from '#imports'

From 760e4d67bff12aeb866b30a4081e9c68cc55711e Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Tue, 31 Jan 2023 13:28:42 +0530
Subject: [PATCH 02/22] fix(gui): checkbox alignment issue

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui/components/cell/Checkbox.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui/components/cell/Checkbox.vue b/packages/nc-gui/components/cell/Checkbox.vue
index dfffdec862..1de2de9d79 100644
--- a/packages/nc-gui/components/cell/Checkbox.vue
+++ b/packages/nc-gui/components/cell/Checkbox.vue
@@ -63,7 +63,7 @@ useSelectedCellKeyupListener(active, (e) => {
 
 <template>
   <div
-    class="flex cursor-pointer"
+    class="flex cursor-pointer w-full h-full"
     :class="{
       'justify-center': !isForm,
       'w-full': isForm,
@@ -72,7 +72,7 @@ useSelectedCellKeyupListener(active, (e) => {
     }"
     @click="onClick(false, $event)"
   >
-    <div class="px-1 pt-1 rounded-full items-center" :class="{ 'bg-gray-100': !vModel, '!ml-[-8px]': readOnly }">
+    <div class="p-1 rounded-full items-center" :class="{ 'bg-gray-100': !vModel, '!ml-[-8px]': readOnly }">
       <Transition name="layout" mode="out-in" :duration="100">
         <component
           :is="getMdiIcon(vModel ? checkboxMeta.icon.checked : checkboxMeta.icon.unchecked)"

From cf3620f9a6f6226291f61b9d75170b973f21b1e9 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Tue, 31 Jan 2023 14:33:47 +0530
Subject: [PATCH 03/22] fix(gui): arrow navigation issue with single select

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui/components/cell/SingleSelect.vue | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/packages/nc-gui/components/cell/SingleSelect.vue b/packages/nc-gui/components/cell/SingleSelect.vue
index 03dc439583..31ef07cbd8 100644
--- a/packages/nc-gui/components/cell/SingleSelect.vue
+++ b/packages/nc-gui/components/cell/SingleSelect.vue
@@ -189,6 +189,13 @@ const toggleMenu = (e: Event) => {
   }
   isOpen.value = editAllowed.value && !isOpen.value
 }
+
+// prevent propagation of keydown event if select is open
+const onKeydown = (e: KeyboardEvent) => {
+  if (isOpen.value && (active.value || editable.value)) {
+    e.stopPropagation()
+  }
+}
 </script>
 
 <template>
@@ -206,7 +213,7 @@ const toggleMenu = (e: Event) => {
       :dropdown-class-name="`nc-dropdown-single-select-cell ${isOpen ? 'active' : ''}`"
       :show-search="isOpen && (active || editable)"
       @select="isOpen = false"
-      @keydown.stop
+      @keydown="onKeydown($event)"
       @search="search"
     >
       <a-select-option

From b747c60f3473dcd2a4aea57b42ce3baaf7699951 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Wed, 1 Feb 2023 12:01:18 +0530
Subject: [PATCH 04/22] fix(gui): stop enter key event propagation

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui/components/cell/SingleSelect.vue | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/packages/nc-gui/components/cell/SingleSelect.vue b/packages/nc-gui/components/cell/SingleSelect.vue
index 31ef07cbd8..e01fd5541d 100644
--- a/packages/nc-gui/components/cell/SingleSelect.vue
+++ b/packages/nc-gui/components/cell/SingleSelect.vue
@@ -195,6 +195,9 @@ const onKeydown = (e: KeyboardEvent) => {
   if (isOpen.value && (active.value || editable.value)) {
     e.stopPropagation()
   }
+  if (e.key === 'Enter') {
+    e.stopPropagation()
+  }
 }
 </script>
 

From 1ce4a90d6f9e55db90cc8ef470316bcd00d11fef Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Wed, 1 Feb 2023 13:40:58 +0530
Subject: [PATCH 05/22] fix(gui): keep single select in disabled state until
 it's active or editable

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../nc-gui/components/cell/SingleSelect.vue   | 24 +++++++++++++++----
 1 file changed, 19 insertions(+), 5 deletions(-)

diff --git a/packages/nc-gui/components/cell/SingleSelect.vue b/packages/nc-gui/components/cell/SingleSelect.vue
index e01fd5541d..4bea41e466 100644
--- a/packages/nc-gui/components/cell/SingleSelect.vue
+++ b/packages/nc-gui/components/cell/SingleSelect.vue
@@ -7,6 +7,7 @@ import {
   ActiveCellInj,
   ColumnInj,
   EditModeInj,
+  IsFormInj,
   IsKanbanInj,
   ReadonlyInj,
   computed,
@@ -44,6 +45,8 @@ const isKanban = inject(IsKanbanInj, ref(false))
 
 const isPublic = inject(IsPublicInj, ref(false))
 
+const isForm = inject(IsFormInj, ref(false))
+
 const { $api } = useNuxtApp()
 
 const searchVal = ref()
@@ -78,7 +81,7 @@ const isOptionMissing = computed(() => {
 
 const hasEditRoles = computed(() => hasRole('owner', true) || hasRole('creator', true) || hasRole('editor', true))
 
-const editAllowed = computed(() => hasEditRoles.value && (active.value || editable.value))
+const editAllowed = computed(() => (hasEditRoles.value || isForm.value) && (active.value || editable.value))
 
 const vModel = computed({
   get: () => tempSelectedOptState.value ?? modelValue,
@@ -199,10 +202,14 @@ const onKeydown = (e: KeyboardEvent) => {
     e.stopPropagation()
   }
 }
+
+const onSelect = () => {
+  isOpen.value = false
+}
 </script>
 
 <template>
-  <div class="h-full w-full flex items-center" @click="toggleMenu">
+  <div class="h-full w-full flex items-center nc-single-select" :class="{ 'read-only': readOnly }" @click="toggleMenu">
     <a-select
       ref="aselect"
       v-model:value="vModel"
@@ -211,11 +218,11 @@ const onKeydown = (e: KeyboardEvent) => {
       :allow-clear="!column.rqd && editAllowed"
       :bordered="false"
       :open="isOpen && (active || editable)"
-      :disabled="readOnly"
+      :disabled="readOnly || !(active || editable)"
       :show-arrow="hasEditRoles && !readOnly && (editable || (active && vModel === null))"
-      :dropdown-class-name="`nc-dropdown-single-select-cell ${isOpen ? 'active' : ''}`"
+      :dropdown-class-name="`nc-dropdown-single-select-cell ${isOpen && (active || editable) ? 'active' : ''}`"
       :show-search="isOpen && (active || editable)"
-      @select="isOpen = false"
+      @select="onSelect"
       @keydown="onKeydown($event)"
       @search="search"
     >
@@ -268,4 +275,11 @@ const onKeydown = (e: KeyboardEvent) => {
 :deep(.ant-select-clear) {
   opacity: 1;
 }
+
+.nc-single-select:not(.read-only) {
+  :deep(.ant-select-selector),
+  :deep(.ant-select-selector input) {
+    @apply !cursor-pointer;
+  }
+}
 </style>

From 1c3629f6e793e27a5a003120cebb99085d1d09f0 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Wed, 1 Feb 2023 14:48:56 +0530
Subject: [PATCH 06/22] fix(gui): close options list when if not active or
 editable

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../nc-gui/components/cell/MultiSelect.vue    | 124 +++++++++---------
 1 file changed, 63 insertions(+), 61 deletions(-)

diff --git a/packages/nc-gui/components/cell/MultiSelect.vue b/packages/nc-gui/components/cell/MultiSelect.vue
index af4d465b20..52ff038cbc 100644
--- a/packages/nc-gui/components/cell/MultiSelect.vue
+++ b/packages/nc-gui/components/cell/MultiSelect.vue
@@ -114,13 +114,13 @@ const selectedTitles = computed(() =>
     ? typeof modelValue === 'string'
       ? isMysql(column.value.base_id)
         ? modelValue.split(',').sort((a, b) => {
-            const opa = options.value.find((el) => el.title === a)
-            const opb = options.value.find((el) => el.title === b)
-            if (opa && opb) {
-              return opa.order! - opb.order!
-            }
-            return 0
-          })
+          const opa = options.value.find((el) => el.title === a)
+          const opb = options.value.find((el) => el.title === b)
+          if (opa && opb) {
+            return opa.order! - opb.order!
+          }
+          return 0
+        })
         : modelValue.split(',')
       : modelValue
     : [],
@@ -233,7 +233,7 @@ async function addIfMissingAndSave() {
 
         // Mysql escapes single quotes with backslash so we keep quotes but others have to unescaped
         if (!isMysql(column.value.base_id)) {
-          updatedColMeta.cdf = updatedColMeta.cdf.replace(/''/g, "'")
+          updatedColMeta.cdf = updatedColMeta.cdf.replace(/''/g, '\'')
         }
       }
 
@@ -276,32 +276,33 @@ const onTagClick = (e: Event, onClose: Function) => {
 </script>
 
 <template>
-  <a-select
-    ref="aselect"
-    v-model:value="vModel"
-    v-model:open="isOpen"
-    mode="multiple"
-    class="w-full overflow-hidden"
-    :bordered="false"
-    clear-icon
-    show-search
-    :show-arrow="hasEditRoles && !readOnly && (editable || (active && vModel.length === 0))"
-    :open="isOpen && (active || editable)"
-    :disabled="readOnly"
-    :class="{ '!ml-[-8px]': readOnly, 'caret-transparent': !hasEditRoles }"
-    :dropdown-class-name="`nc-dropdown-multi-select-cell ${isOpen ? 'active' : ''}`"
-    @search="search"
-    @keydown.stop
-    @click="isOpen = editAllowed && !isOpen"
-  >
-    <a-select-option
-      v-for="op of options"
-      :key="op.id || op.title"
-      :value="op.title"
-      :data-testid="`select-option-${column.title}-${rowIndex}`"
-      @click.stop
+  <div class="nc-multi-select h-full w-full flex items-center"
+       @click="isOpen = editAllowed && !isOpen" :class="{ 'read-only': readOnly }">
+    <a-select
+      ref="aselect"
+      v-model:value="vModel"
+      mode="multiple"
+      class="w-full overflow-hidden"
+      :bordered="false"
+      clear-icon
+      show-search
+      :show-arrow="hasEditRoles && !readOnly && (editable || (active && vModel.length === 0))"
+      :open="isOpen && (active || editable)"
+      @update:open="isOpen = $event"
+      :disabled="readOnly"
+      :class="{ '!ml-[-8px]': readOnly, 'caret-transparent': !hasEditRoles }"
+      :dropdown-class-name="`nc-dropdown-multi-select-cell ${isOpen ? 'active' : ''}`"
+      @search="search"
+      @keydown.stop
     >
-      <a-tag class="rounded-tag" :color="op.color">
+      <a-select-option
+        v-for="op of options"
+        :key="op.id || op.title"
+        :value="op.title"
+        :data-testid="`select-option-${column.title}-${rowIndex}`"
+        @click.stop
+      >
+        <a-tag class="rounded-tag" :color="op.color">
         <span
           :style="{
             'color': tinycolor.isReadable(op.color || '#ccc', '#fff', { level: 'AA', size: 'large' })
@@ -313,33 +314,33 @@ const onTagClick = (e: Event, onClose: Function) => {
         >
           {{ op.title }}
         </span>
-      </a-tag>
-    </a-select-option>
+        </a-tag>
+      </a-select-option>
 
-    <a-select-option
-      v-if="searchVal && isOptionMissing && !isPublic && (hasRole('owner', true) || hasRole('creator', true))"
-      :key="searchVal"
-      :value="searchVal"
-    >
-      <div class="flex gap-2 text-gray-500 items-center h-full">
-        <MdiPlusThick class="min-w-4" />
-        <div class="text-xs whitespace-normal">
-          Create new option named <strong>{{ searchVal }}</strong>
-        </div>
-      </div>
-    </a-select-option>
-
-    <template #tagRender="{ value: val, onClose }">
-      <a-tag
-        v-if="options.find((el) => el.title === val)"
-        class="rounded-tag nc-selected-option"
-        :style="{ display: 'flex', alignItems: 'center' }"
-        :color="options.find((el) => el.title === val)?.color"
-        :closable="editAllowed && (active || editable) && (vModel.length > 1 || !column?.rqd)"
-        :close-icon="h(MdiCloseCircle, { class: ['ms-close-icon'] })"
-        @click="onTagClick($event, onClose)"
-        @close="onClose"
+      <a-select-option
+        v-if="searchVal && isOptionMissing && !isPublic && (hasRole('owner', true) || hasRole('creator', true))"
+        :key="searchVal"
+        :value="searchVal"
       >
+        <div class="flex gap-2 text-gray-500 items-center h-full">
+          <MdiPlusThick class="min-w-4" />
+          <div class="text-xs whitespace-normal">
+            Create new option named <strong>{{ searchVal }}</strong>
+          </div>
+        </div>
+      </a-select-option>
+
+      <template #tagRender="{ value: val, onClose }">
+        <a-tag
+          v-if="options.find((el) => el.title === val)"
+          class="rounded-tag nc-selected-option"
+          :style="{ display: 'flex', alignItems: 'center' }"
+          :color="options.find((el) => el.title === val)?.color"
+          :closable="editAllowed && (active || editable) && (vModel.length > 1 || !column?.rqd)"
+          :close-icon="h(MdiCloseCircle, { class: ['ms-close-icon'] })"
+          @click="onTagClick($event, onClose)"
+          @close="onClose"
+        >
         <span
           :style="{
             'color': tinycolor.isReadable(options.find((el) => el.title === val)?.color || '#ccc', '#fff', {
@@ -356,9 +357,10 @@ const onTagClick = (e: Event, onClose: Function) => {
         >
           {{ val }}
         </span>
-      </a-tag>
-    </template>
-  </a-select>
+        </a-tag>
+      </template>
+    </a-select>
+  </div>
 </template>
 
 <style scoped>

From ad7a2d661085f9d682e9a4e74b2c4a777e435b80 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Wed, 1 Feb 2023 15:01:54 +0530
Subject: [PATCH 07/22] fix(gui): keep select as disabled until the cell become
 active or editable

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui/components/cell/MultiSelect.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nc-gui/components/cell/MultiSelect.vue b/packages/nc-gui/components/cell/MultiSelect.vue
index 52ff038cbc..17babf973f 100644
--- a/packages/nc-gui/components/cell/MultiSelect.vue
+++ b/packages/nc-gui/components/cell/MultiSelect.vue
@@ -289,7 +289,7 @@ const onTagClick = (e: Event, onClose: Function) => {
       :show-arrow="hasEditRoles && !readOnly && (editable || (active && vModel.length === 0))"
       :open="isOpen && (active || editable)"
       @update:open="isOpen = $event"
-      :disabled="readOnly"
+      :disabled="readOnly || !(active || editable)"
       :class="{ '!ml-[-8px]': readOnly, 'caret-transparent': !hasEditRoles }"
       :dropdown-class-name="`nc-dropdown-multi-select-cell ${isOpen ? 'active' : ''}`"
       @search="search"

From e708465697b6f02e17de29c662d93a2af10b5d98 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Wed, 1 Feb 2023 15:36:00 +0530
Subject: [PATCH 08/22] fix(gui): show pointer for select field if not readonly

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../nc-gui/components/cell/MultiSelect.vue    | 93 ++++++++++---------
 1 file changed, 51 insertions(+), 42 deletions(-)

diff --git a/packages/nc-gui/components/cell/MultiSelect.vue b/packages/nc-gui/components/cell/MultiSelect.vue
index 17babf973f..5db588e070 100644
--- a/packages/nc-gui/components/cell/MultiSelect.vue
+++ b/packages/nc-gui/components/cell/MultiSelect.vue
@@ -114,13 +114,13 @@ const selectedTitles = computed(() =>
     ? typeof modelValue === 'string'
       ? isMysql(column.value.base_id)
         ? modelValue.split(',').sort((a, b) => {
-          const opa = options.value.find((el) => el.title === a)
-          const opb = options.value.find((el) => el.title === b)
-          if (opa && opb) {
-            return opa.order! - opb.order!
-          }
-          return 0
-        })
+            const opa = options.value.find((el) => el.title === a)
+            const opb = options.value.find((el) => el.title === b)
+            if (opa && opb) {
+              return opa.order! - opb.order!
+            }
+            return 0
+          })
         : modelValue.split(',')
       : modelValue
     : [],
@@ -233,7 +233,7 @@ async function addIfMissingAndSave() {
 
         // Mysql escapes single quotes with backslash so we keep quotes but others have to unescaped
         if (!isMysql(column.value.base_id)) {
-          updatedColMeta.cdf = updatedColMeta.cdf.replace(/''/g, '\'')
+          updatedColMeta.cdf = updatedColMeta.cdf.replace(/''/g, "'")
         }
       }
 
@@ -276,8 +276,11 @@ const onTagClick = (e: Event, onClose: Function) => {
 </script>
 
 <template>
-  <div class="nc-multi-select h-full w-full flex items-center"
-       @click="isOpen = editAllowed && !isOpen" :class="{ 'read-only': readOnly }">
+  <div
+    class="nc-multi-select h-full w-full flex items-center"
+    :class="{ 'read-only': readOnly }"
+    @click="isOpen = editAllowed && !isOpen"
+  >
     <a-select
       ref="aselect"
       v-model:value="vModel"
@@ -287,9 +290,8 @@ const onTagClick = (e: Event, onClose: Function) => {
       clear-icon
       show-search
       :show-arrow="hasEditRoles && !readOnly && (editable || (active && vModel.length === 0))"
-      :open="isOpen && (active || editable)"
-      @update:open="isOpen = $event"
-      :disabled="readOnly || !(active || editable)"
+      :open="isOpen && editAllowed"
+      :disabled="readOnly || !editAllowed"
       :class="{ '!ml-[-8px]': readOnly, 'caret-transparent': !hasEditRoles }"
       :dropdown-class-name="`nc-dropdown-multi-select-cell ${isOpen ? 'active' : ''}`"
       @search="search"
@@ -303,17 +305,17 @@ const onTagClick = (e: Event, onClose: Function) => {
         @click.stop
       >
         <a-tag class="rounded-tag" :color="op.color">
-        <span
-          :style="{
-            'color': tinycolor.isReadable(op.color || '#ccc', '#fff', { level: 'AA', size: 'large' })
-              ? '#fff'
-              : tinycolor.mostReadable(op.color || '#ccc', ['#0b1d05', '#fff']).toHex8String(),
-            'font-size': '13px',
-          }"
-          :class="{ 'text-sm': isKanban }"
-        >
-          {{ op.title }}
-        </span>
+          <span
+            :style="{
+              'color': tinycolor.isReadable(op.color || '#ccc', '#fff', { level: 'AA', size: 'large' })
+                ? '#fff'
+                : tinycolor.mostReadable(op.color || '#ccc', ['#0b1d05', '#fff']).toHex8String(),
+              'font-size': '13px',
+            }"
+            :class="{ 'text-sm': isKanban }"
+          >
+            {{ op.title }}
+          </span>
         </a-tag>
       </a-select-option>
 
@@ -336,34 +338,34 @@ const onTagClick = (e: Event, onClose: Function) => {
           class="rounded-tag nc-selected-option"
           :style="{ display: 'flex', alignItems: 'center' }"
           :color="options.find((el) => el.title === val)?.color"
-          :closable="editAllowed && (active || editable) && (vModel.length > 1 || !column?.rqd)"
+          :closable="editAllowed && (vModel.length > 1 || !column?.rqd)"
           :close-icon="h(MdiCloseCircle, { class: ['ms-close-icon'] })"
           @click="onTagClick($event, onClose)"
           @close="onClose"
         >
-        <span
-          :style="{
-            'color': tinycolor.isReadable(options.find((el) => el.title === val)?.color || '#ccc', '#fff', {
-              level: 'AA',
-              size: 'large',
-            })
-              ? '#fff'
-              : tinycolor
-                  .mostReadable(options.find((el) => el.title === val)?.color || '#ccc', ['#0b1d05', '#fff'])
-                  .toHex8String(),
-            'font-size': '13px',
-          }"
-          :class="{ 'text-sm': isKanban }"
-        >
-          {{ val }}
-        </span>
+          <span
+            :style="{
+              'color': tinycolor.isReadable(options.find((el) => el.title === val)?.color || '#ccc', '#fff', {
+                level: 'AA',
+                size: 'large',
+              })
+                ? '#fff'
+                : tinycolor
+                    .mostReadable(options.find((el) => el.title === val)?.color || '#ccc', ['#0b1d05', '#fff'])
+                    .toHex8String(),
+              'font-size': '13px',
+            }"
+            :class="{ 'text-sm': isKanban }"
+          >
+            {{ val }}
+          </span>
         </a-tag>
       </template>
     </a-select>
   </div>
 </template>
 
-<style scoped>
+<style scoped lang="scss">
 .ms-close-icon {
   color: rgba(0, 0, 0, 0.25);
   cursor: pointer;
@@ -408,4 +410,11 @@ const onTagClick = (e: Event, onClose: Function) => {
 :deep(.ant-select-selection-overflow) {
   @apply flex-nowrap;
 }
+
+.nc-multi-select:not(.read-only) {
+  :deep(.ant-select-selector),
+  :deep(.ant-select-selector input) {
+    @apply "!cursor-pointer";
+  }
+}
 </style>

From 493c7e7b33fc9fa19d90cabe2e1e782238995f5e Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Wed, 1 Feb 2023 16:18:31 +0530
Subject: [PATCH 09/22] fix(gui): trigger dropdown on clicking anywhere in the
 cell

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../nc-gui/components/cell/MultiSelect.vue    | 29 ++++++++++++++-----
 .../components/smartsheet/TableDataCell.vue   |  8 +++--
 packages/nc-gui/context/index.ts              |  1 +
 3 files changed, 28 insertions(+), 10 deletions(-)

diff --git a/packages/nc-gui/components/cell/MultiSelect.vue b/packages/nc-gui/components/cell/MultiSelect.vue
index 5db588e070..99a26e65a2 100644
--- a/packages/nc-gui/components/cell/MultiSelect.vue
+++ b/packages/nc-gui/components/cell/MultiSelect.vue
@@ -1,10 +1,12 @@
 <script lang="ts" setup>
+import { onUnmounted } from '@vue/runtime-core'
 import { message } from 'ant-design-vue'
 import tinycolor from 'tinycolor2'
 import type { Select as AntSelect } from 'ant-design-vue'
 import type { SelectOptionType, SelectOptionsType } from 'nocodb-sdk'
 import {
   ActiveCellInj,
+  CellClickHookInj,
   ColumnInj,
   IsKanbanInj,
   ReadonlyInj,
@@ -16,7 +18,6 @@ import {
   onMounted,
   reactive,
   ref,
-  useEventListener,
   useMetas,
   useProject,
   useRoles,
@@ -144,8 +145,6 @@ onMounted(() => {
   })
 })
 
-useEventListener(document, 'click', handleClose)
-
 watch(
   () => modelValue,
   () => {
@@ -273,14 +272,28 @@ const onTagClick = (e: Event, onClose: Function) => {
     onClose()
   }
 }
+
+
+const cellClickHook = inject(CellClickHookInj)
+
+const toggleMenu = () => {
+  if (cellClickHook) return
+  isOpen.value = editAllowed.value && !isOpen.value
+}
+
+const cellClickHookHandler = () => {
+  isOpen.value = editAllowed.value && !isOpen.value
+}
+onMounted(() => {
+  cellClickHook?.on(cellClickHookHandler)
+})
+onUnmounted(() => {
+  cellClickHook?.on(cellClickHookHandler)
+})
 </script>
 
 <template>
-  <div
-    class="nc-multi-select h-full w-full flex items-center"
-    :class="{ 'read-only': readOnly }"
-    @click="isOpen = editAllowed && !isOpen"
-  >
+  <div class="nc-multi-select h-full w-full flex items-center" :class="{ 'read-only': readOnly }" @click="toggleMenu">
     <a-select
       ref="aselect"
       v-model:value="vModel"
diff --git a/packages/nc-gui/components/smartsheet/TableDataCell.vue b/packages/nc-gui/components/smartsheet/TableDataCell.vue
index 91bb00a1b1..932c61519b 100644
--- a/packages/nc-gui/components/smartsheet/TableDataCell.vue
+++ b/packages/nc-gui/components/smartsheet/TableDataCell.vue
@@ -1,10 +1,14 @@
 <script lang="ts" setup>
-import { onBeforeUnmount, onMounted, ref, useSmartsheetStoreOrThrow } from '#imports'
+import { CellClickHookInj, createEventHook, onBeforeUnmount, onMounted, ref, useSmartsheetStoreOrThrow } from '#imports'
 
 const { cellRefs } = useSmartsheetStoreOrThrow()
 
 const el = ref<HTMLTableDataCellElement>()
 
+const cellClickHook = createEventHook()
+
+provide(CellClickHookInj, cellClickHook)
+
 onMounted(() => {
   cellRefs.value.push(el.value!)
 })
@@ -18,7 +22,7 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-  <td ref="el">
+  <td ref="el" @click="cellClickHook.trigger($event)">
     <slot />
   </td>
 </template>
diff --git a/packages/nc-gui/context/index.ts b/packages/nc-gui/context/index.ts
index 83bd827ecd..1b7a53e790 100644
--- a/packages/nc-gui/context/index.ts
+++ b/packages/nc-gui/context/index.ts
@@ -32,3 +32,4 @@ export const SharedViewPasswordInj: InjectionKey<Ref<string | null>> = Symbol('s
 export const CellUrlDisableOverlayInj: InjectionKey<Ref<boolean>> = Symbol('cell-url-disable-url')
 export const DropZoneRef: InjectionKey<Ref<Element | undefined>> = Symbol('drop-zone-ref')
 export const ToggleDialogInj: InjectionKey<Function> = Symbol('toggle-dialog-injection')
+export const CellClickHookInj: InjectionKey<EventHook<MouseEvent> | undefined> = Symbol('cell-click-injection')

From 24a1a2ca6440a52cb20e6f39e1d99bdf2c5485bb Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Wed, 1 Feb 2023 16:23:49 +0530
Subject: [PATCH 10/22] fix(gui): trigger single select dropdown on clicking
 anywhere in the cell(td)

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../nc-gui/components/cell/MultiSelect.vue    |  1 -
 .../nc-gui/components/cell/SingleSelect.vue   | 40 +++++++++++++------
 2 files changed, 28 insertions(+), 13 deletions(-)

diff --git a/packages/nc-gui/components/cell/MultiSelect.vue b/packages/nc-gui/components/cell/MultiSelect.vue
index 99a26e65a2..09ded5e866 100644
--- a/packages/nc-gui/components/cell/MultiSelect.vue
+++ b/packages/nc-gui/components/cell/MultiSelect.vue
@@ -273,7 +273,6 @@ const onTagClick = (e: Event, onClose: Function) => {
   }
 }
 
-
 const cellClickHook = inject(CellClickHookInj)
 
 const toggleMenu = () => {
diff --git a/packages/nc-gui/components/cell/SingleSelect.vue b/packages/nc-gui/components/cell/SingleSelect.vue
index 4bea41e466..accb0576e4 100644
--- a/packages/nc-gui/components/cell/SingleSelect.vue
+++ b/packages/nc-gui/components/cell/SingleSelect.vue
@@ -1,10 +1,12 @@
 <script lang="ts" setup>
+import { onUnmounted } from '@vue/runtime-core'
 import { message } from 'ant-design-vue'
 import tinycolor from 'tinycolor2'
 import type { Select as AntSelect } from 'ant-design-vue'
 import type { SelectOptionType } from 'nocodb-sdk'
 import {
   ActiveCellInj,
+  CellClickHookInj,
   ColumnInj,
   EditModeInj,
   IsFormInj,
@@ -180,7 +182,25 @@ const search = () => {
   searchVal.value = aselect.value?.$el?.querySelector('.ant-select-selection-search-input')?.value
 }
 
+// prevent propagation of keydown event if select is open
+const onKeydown = (e: KeyboardEvent) => {
+  if (isOpen.value && (active.value || editable.value)) {
+    e.stopPropagation()
+  }
+  if (e.key === 'Enter') {
+    e.stopPropagation()
+  }
+}
+
+const onSelect = () => {
+  isOpen.value = false
+}
+
+const cellClickHook = inject(CellClickHookInj)
+
 const toggleMenu = (e: Event) => {
+  if (cellClickHook) return
+
   // todo: refactor
   // check clicked element is clear icon
   if (
@@ -193,19 +213,15 @@ const toggleMenu = (e: Event) => {
   isOpen.value = editAllowed.value && !isOpen.value
 }
 
-// prevent propagation of keydown event if select is open
-const onKeydown = (e: KeyboardEvent) => {
-  if (isOpen.value && (active.value || editable.value)) {
-    e.stopPropagation()
-  }
-  if (e.key === 'Enter') {
-    e.stopPropagation()
-  }
-}
-
-const onSelect = () => {
-  isOpen.value = false
+const cellClickHookHandler = () => {
+  isOpen.value = editAllowed.value && !isOpen.value
 }
+onMounted(() => {
+  cellClickHook?.on(cellClickHookHandler)
+})
+onUnmounted(() => {
+  cellClickHook?.on(cellClickHookHandler)
+})
 </script>
 
 <template>

From a4877e8fbe8dfbcfeee3acc750501d7667471cda Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Wed, 1 Feb 2023 16:27:22 +0530
Subject: [PATCH 11/22] refactor(gui): cleanup

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui/components/cell/MultiSelect.vue | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/packages/nc-gui/components/cell/MultiSelect.vue b/packages/nc-gui/components/cell/MultiSelect.vue
index 09ded5e866..b1ac33347e 100644
--- a/packages/nc-gui/components/cell/MultiSelect.vue
+++ b/packages/nc-gui/components/cell/MultiSelect.vue
@@ -127,12 +127,6 @@ const selectedTitles = computed(() =>
     : [],
 )
 
-const handleClose = (e: MouseEvent) => {
-  if (aselect.value && !aselect.value.$el.contains(e.target)) {
-    isOpen.value = false
-  }
-}
-
 onMounted(() => {
   selectedIds.value = selectedTitles.value.flatMap((el) => {
     const item = options.value.find((op) => op.title === el)

From 88a94bf5109029e9f2dcd36e02e54ecb850a2104 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Wed, 1 Feb 2023 17:22:15 +0530
Subject: [PATCH 12/22] 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  | 16 ++++++++++++++--
 packages/nc-gui/components/cell/SingleSelect.vue | 11 ++++++++++-
 2 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/packages/nc-gui/components/cell/MultiSelect.vue b/packages/nc-gui/components/cell/MultiSelect.vue
index b1ac33347e..515eff5611 100644
--- a/packages/nc-gui/components/cell/MultiSelect.vue
+++ b/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) {
diff --git a/packages/nc-gui/components/cell/SingleSelect.vue b/packages/nc-gui/components/cell/SingleSelect.vue
index accb0576e4..86f154d7ac 100644
--- a/packages/nc-gui/components/cell/SingleSelect.vue
+++ b/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>

From 3a92f2aff86f7aad9facc52eb82a8b9741219af4 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Wed, 1 Feb 2023 17:29:42 +0530
Subject: [PATCH 13/22] fix(gui): close dropdown only if clicked outside

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui/components/cell/MultiSelect.vue  | 14 +++++++++-----
 packages/nc-gui/components/cell/SingleSelect.vue |  2 ++
 2 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/packages/nc-gui/components/cell/MultiSelect.vue b/packages/nc-gui/components/cell/MultiSelect.vue
index 515eff5611..2b90f19da3 100644
--- a/packages/nc-gui/components/cell/MultiSelect.vue
+++ b/packages/nc-gui/components/cell/MultiSelect.vue
@@ -15,15 +15,15 @@ import {
   extractSdkResponseErrorMsg,
   h,
   inject,
+  isDrawerOrModalExist,
   onMounted,
   reactive,
   ref,
+  useEventListener,
   useMetas,
   useProject,
-  useEventListener,
   useRoles,
   useSelectedCellKeyupListener,
-  isDrawerOrModalExist,
   watch,
 } from '#imports'
 import MdiCloseCircle from '~icons/mdi/close-circle'
@@ -286,10 +286,14 @@ onUnmounted(() => {
   cellClickHook?.on(cellClickHookHandler)
 })
 
-
-
 const handleClose = (e: MouseEvent) => {
-  if (isOpen.value && aselect.value && !aselect.value.$el.contains(e.target)) {
+  // close dropdown if clicked outside of dropdown
+  if (
+    isOpen.value &&
+    aselect.value &&
+    !aselect.value.$el.contains(e.target) &&
+    !document.querySelector('.nc-dropdown-multi-select-cell')?.contains(e.target as Node)
+  ) {
     isOpen.value = false
   }
 }
diff --git a/packages/nc-gui/components/cell/SingleSelect.vue b/packages/nc-gui/components/cell/SingleSelect.vue
index 86f154d7ac..6579bbd7ef 100644
--- a/packages/nc-gui/components/cell/SingleSelect.vue
+++ b/packages/nc-gui/components/cell/SingleSelect.vue
@@ -224,6 +224,8 @@ onUnmounted(() => {
   cellClickHook?.on(cellClickHookHandler)
 })
 
+
+
 const handleClose = (e: MouseEvent) => {
   if (isOpen.value && aselect.value && !aselect.value.$el.contains(e.target)) {
     isOpen.value = false

From d31e0ab224f6711330726947184b22d9468d330d Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Wed, 1 Feb 2023 23:33:05 +0530
Subject: [PATCH 14/22] fix(gui): reset active state if user clicked anywhere
 outside the tbody

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui/components/smartsheet/Grid.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nc-gui/components/smartsheet/Grid.vue b/packages/nc-gui/components/smartsheet/Grid.vue
index 44996558ba..5a08a9a925 100644
--- a/packages/nc-gui/components/smartsheet/Grid.vue
+++ b/packages/nc-gui/components/smartsheet/Grid.vue
@@ -495,7 +495,7 @@ useEventListener(document, 'keyup', async (e: KeyboardEvent) => {
 /** On clicking outside of table reset active cell  */
 const smartTable = ref(null)
 
-onClickOutside(smartTable, (e) => {
+onClickOutside(tbodyEl, (e) => {
   // do nothing if context menu was open
   if (contextMenu.value) return
 

From 05c0db7cc19218a7f3343069ed702e59b290c2d7 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Wed, 1 Feb 2023 23:44:08 +0530
Subject: [PATCH 15/22] fix(gui): equivalent padding in gallery view

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui/components/cell/MultiSelect.vue  | 6 +++++-
 packages/nc-gui/components/cell/SingleSelect.vue | 4 ++++
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/packages/nc-gui/components/cell/MultiSelect.vue b/packages/nc-gui/components/cell/MultiSelect.vue
index 2b90f19da3..ff65104913 100644
--- a/packages/nc-gui/components/cell/MultiSelect.vue
+++ b/packages/nc-gui/components/cell/MultiSelect.vue
@@ -314,7 +314,7 @@ useEventListener(document, 'click', handleClose, true)
       :show-arrow="hasEditRoles && !readOnly && (editable || (active && vModel.length === 0))"
       :open="isOpen && editAllowed"
       :disabled="readOnly || !editAllowed"
-      :class="{ '!ml-[-8px]': readOnly, 'caret-transparent': !hasEditRoles }"
+      :class="{ 'caret-transparent': !hasEditRoles }"
       :dropdown-class-name="`nc-dropdown-multi-select-cell ${isOpen ? 'active' : ''}`"
       @search="search"
       @keydown.stop
@@ -439,4 +439,8 @@ useEventListener(document, 'click', handleClose, true)
     @apply "!cursor-pointer";
   }
 }
+
+:deep(.ant-select-selector){
+  @apply !px-0;
+}
 </style>
diff --git a/packages/nc-gui/components/cell/SingleSelect.vue b/packages/nc-gui/components/cell/SingleSelect.vue
index 6579bbd7ef..78e7318c6f 100644
--- a/packages/nc-gui/components/cell/SingleSelect.vue
+++ b/packages/nc-gui/components/cell/SingleSelect.vue
@@ -309,4 +309,8 @@ useEventListener(document, 'click', handleClose, true)
     @apply !cursor-pointer;
   }
 }
+
+:deep(.ant-select-selector){
+  @apply !px-0;
+}
 </style>

From 074fd0c62a3cdf1b9455c9c79be4c4414c7704cc Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Wed, 1 Feb 2023 23:47:17 +0530
Subject: [PATCH 16/22] fix(gui): show multiselect in form view

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui/components/cell/MultiSelect.vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/nc-gui/components/cell/MultiSelect.vue b/packages/nc-gui/components/cell/MultiSelect.vue
index ff65104913..0ec3ae35f0 100644
--- a/packages/nc-gui/components/cell/MultiSelect.vue
+++ b/packages/nc-gui/components/cell/MultiSelect.vue
@@ -47,6 +47,8 @@ const editable = inject(EditModeInj, ref(false))
 
 const isPublic = inject(IsPublicInj, ref(false))
 
+const isForm = inject(IsFormInj, ref(false))
+
 const selectedIds = ref<string[]>([])
 
 const aselect = ref<typeof AntSelect>()
@@ -88,7 +90,7 @@ const isOptionMissing = computed(() => {
 
 const hasEditRoles = computed(() => hasRole('owner', true) || hasRole('creator', true) || hasRole('editor', true))
 
-const editAllowed = computed(() => hasEditRoles.value && (active.value || editable.value))
+const editAllowed = computed(() => (hasEditRoles.value || isForm.value) && (active.value || editable.value))
 
 const vModel = computed({
   get: () => {

From a047c80b2da31b53c4d7d8f664ac5f61f30bf42a Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Thu, 2 Feb 2023 00:01:25 +0530
Subject: [PATCH 17/22] fix(gui): close dropdown on pressing escape key in form
 view

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui/components/cell/MultiSelect.vue  |  7 ++++++-
 packages/nc-gui/components/cell/SingleSelect.vue | 11 +++++++----
 2 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/packages/nc-gui/components/cell/MultiSelect.vue b/packages/nc-gui/components/cell/MultiSelect.vue
index 0ec3ae35f0..00c0fa2486 100644
--- a/packages/nc-gui/components/cell/MultiSelect.vue
+++ b/packages/nc-gui/components/cell/MultiSelect.vue
@@ -198,6 +198,11 @@ useSelectedCellKeyupListener(active, (e) => {
   }
 })
 
+// close dropdown list on escape
+useSelectedCellKeyupListener(isOpen, (e) => {
+  if (e.key === 'Escape') isOpen.value = false
+})
+
 const activeOptCreateInProgress = ref(0)
 
 async function addIfMissingAndSave() {
@@ -442,7 +447,7 @@ useEventListener(document, 'click', handleClose, true)
   }
 }
 
-:deep(.ant-select-selector){
+:deep(.ant-select-selector) {
   @apply !px-0;
 }
 </style>
diff --git a/packages/nc-gui/components/cell/SingleSelect.vue b/packages/nc-gui/components/cell/SingleSelect.vue
index 78e7318c6f..66acdd312b 100644
--- a/packages/nc-gui/components/cell/SingleSelect.vue
+++ b/packages/nc-gui/components/cell/SingleSelect.vue
@@ -16,10 +16,10 @@ import {
   enumColor,
   extractSdkResponseErrorMsg,
   inject,
+  isDrawerOrModalExist,
   ref,
   useRoles,
   useSelectedCellKeyupListener,
-  isDrawerOrModalExist,
   watch,
 } from '#imports'
 
@@ -133,6 +133,11 @@ useSelectedCellKeyupListener(active, (e) => {
   }
 })
 
+// close dropdown list on escape
+useSelectedCellKeyupListener(isOpen, (e) => {
+  if (e.key === 'Escape') isOpen.value = false
+})
+
 async function addIfMissingAndSave() {
   if (!searchVal.value || isPublic.value) return false
 
@@ -224,8 +229,6 @@ onUnmounted(() => {
   cellClickHook?.on(cellClickHookHandler)
 })
 
-
-
 const handleClose = (e: MouseEvent) => {
   if (isOpen.value && aselect.value && !aselect.value.$el.contains(e.target)) {
     isOpen.value = false
@@ -310,7 +313,7 @@ useEventListener(document, 'click', handleClose, true)
   }
 }
 
-:deep(.ant-select-selector){
+:deep(.ant-select-selector) {
   @apply !px-0;
 }
 </style>

From 9f2b16091d858e8b6577e13f0b24d9a4a5063bba Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Thu, 2 Feb 2023 11:15:27 +0530
Subject: [PATCH 18/22] fix(gui): on spacebar press open expanded form

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui/components/cell/MultiSelect.vue  | 3 +++
 packages/nc-gui/components/cell/SingleSelect.vue | 3 +++
 2 files changed, 6 insertions(+)

diff --git a/packages/nc-gui/components/cell/MultiSelect.vue b/packages/nc-gui/components/cell/MultiSelect.vue
index 00c0fa2486..f5a8d11677 100644
--- a/packages/nc-gui/components/cell/MultiSelect.vue
+++ b/packages/nc-gui/components/cell/MultiSelect.vue
@@ -177,6 +177,9 @@ useSelectedCellKeyupListener(active, (e) => {
         isOpen.value = true
       }
       break
+    // skip space bar key press since it's used for expand row
+    case ' ':
+      break
     case 'ArrowUp':
     case 'ArrowDown':
     case 'ArrowRight':
diff --git a/packages/nc-gui/components/cell/SingleSelect.vue b/packages/nc-gui/components/cell/SingleSelect.vue
index 66acdd312b..4a40dddd06 100644
--- a/packages/nc-gui/components/cell/SingleSelect.vue
+++ b/packages/nc-gui/components/cell/SingleSelect.vue
@@ -119,6 +119,9 @@ useSelectedCellKeyupListener(active, (e) => {
         isOpen.value = true
       }
       break
+    // skip space bar key press since it's used for expand row
+    case ' ':
+      break
     default:
       if (!editAllowed.value) {
         e.preventDefault()

From 93803fad5838be85783675027849934d7908cb1d Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Thu, 2 Feb 2023 11:17:39 +0530
Subject: [PATCH 19/22] fix(gui): cell clear icon

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui/components/cell/SingleSelect.vue | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/packages/nc-gui/components/cell/SingleSelect.vue b/packages/nc-gui/components/cell/SingleSelect.vue
index 4a40dddd06..6c4cb17c67 100644
--- a/packages/nc-gui/components/cell/SingleSelect.vue
+++ b/packages/nc-gui/components/cell/SingleSelect.vue
@@ -208,8 +208,6 @@ const onSelect = () => {
 const cellClickHook = inject(CellClickHookInj)
 
 const toggleMenu = (e: Event) => {
-  if (cellClickHook) return
-
   // todo: refactor
   // check clicked element is clear icon
   if (
@@ -217,8 +215,9 @@ const toggleMenu = (e: Event) => {
     (e.target as HTMLElement)?.closest('.ant-select-clear')
   ) {
     vModel.value = ''
-    return
+    return e.stopPropagation()
   }
+  if (cellClickHook) return
   isOpen.value = editAllowed.value && !isOpen.value
 }
 

From 994b53e22c5f40f6bbad111cd25c7dd0be67efdf Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Thu, 2 Feb 2023 11:26:53 +0530
Subject: [PATCH 20/22] fix(gui): show dropdown arrow in multiselect

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui/components/cell/MultiSelect.vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/nc-gui/components/cell/MultiSelect.vue b/packages/nc-gui/components/cell/MultiSelect.vue
index f5a8d11677..d0bb12d291 100644
--- a/packages/nc-gui/components/cell/MultiSelect.vue
+++ b/packages/nc-gui/components/cell/MultiSelect.vue
@@ -158,6 +158,8 @@ watch(
 )
 
 watch(isOpen, (n, _o) => {
+  if (!n) searchVal.value = ''
+
   if (editAllowed.value) {
     if (!n) {
       aselect.value?.$el?.querySelector('input')?.blur()
@@ -321,7 +323,7 @@ useEventListener(document, 'click', handleClose, true)
       :bordered="false"
       clear-icon
       show-search
-      :show-arrow="hasEditRoles && !readOnly && (editable || (active && vModel.length === 0))"
+      :show-arrow="editAllowed && !readOnly"
       :open="isOpen && editAllowed"
       :disabled="readOnly || !editAllowed"
       :class="{ 'caret-transparent': !hasEditRoles }"

From ace0b2f800d223a2329c9ba502ae4b957c586917 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Thu, 2 Feb 2023 11:37:43 +0530
Subject: [PATCH 21/22] fix(gui): multi-select dropdown closing issue on
 selecting an option

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui/components/cell/MultiSelect.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nc-gui/components/cell/MultiSelect.vue b/packages/nc-gui/components/cell/MultiSelect.vue
index d0bb12d291..08c09b4416 100644
--- a/packages/nc-gui/components/cell/MultiSelect.vue
+++ b/packages/nc-gui/components/cell/MultiSelect.vue
@@ -304,7 +304,7 @@ const handleClose = (e: MouseEvent) => {
     isOpen.value &&
     aselect.value &&
     !aselect.value.$el.contains(e.target) &&
-    !document.querySelector('.nc-dropdown-multi-select-cell')?.contains(e.target as Node)
+    !document.querySelector('.nc-dropdown-multi-select-cell.active')?.contains(e.target as Node)
   ) {
     isOpen.value = false
   }

From 145cb83f7e370b901ba90d01f4083465a4448cfe Mon Sep 17 00:00:00 2001
From: Raju Udava <86527202+dstala@users.noreply.github.com>
Date: Thu, 2 Feb 2023 12:46:00 +0530
Subject: [PATCH 22/22] test: multiselect test update as per new UX

Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com>
---
 packages/nc-gui/components/cell/MultiSelect.vue  |  4 ++++
 packages/nc-gui/components/cell/SingleSelect.vue |  4 ++++
 tests/playwright/tests/columnMultiSelect.spec.ts | 10 +++++++---
 3 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/packages/nc-gui/components/cell/MultiSelect.vue b/packages/nc-gui/components/cell/MultiSelect.vue
index 08c09b4416..9e5971b488 100644
--- a/packages/nc-gui/components/cell/MultiSelect.vue
+++ b/packages/nc-gui/components/cell/MultiSelect.vue
@@ -455,4 +455,8 @@ useEventListener(document, 'click', handleClose, true)
 :deep(.ant-select-selector) {
   @apply !px-0;
 }
+
+:deep(.ant-select-selection-search-input) {
+  @apply !text-xs;
+}
 </style>
diff --git a/packages/nc-gui/components/cell/SingleSelect.vue b/packages/nc-gui/components/cell/SingleSelect.vue
index 6c4cb17c67..4635d2deac 100644
--- a/packages/nc-gui/components/cell/SingleSelect.vue
+++ b/packages/nc-gui/components/cell/SingleSelect.vue
@@ -318,4 +318,8 @@ useEventListener(document, 'click', handleClose, true)
 :deep(.ant-select-selector) {
   @apply !px-0;
 }
+
+:deep(.ant-select-selection-search-input) {
+  @apply !text-xs;
+}
 </style>
diff --git a/tests/playwright/tests/columnMultiSelect.spec.ts b/tests/playwright/tests/columnMultiSelect.spec.ts
index 7053824d86..1e1966a674 100644
--- a/tests/playwright/tests/columnMultiSelect.spec.ts
+++ b/tests/playwright/tests/columnMultiSelect.spec.ts
@@ -76,18 +76,22 @@ test.describe('Multi select', () => {
       multiSelect: true,
     });
 
-    await grid.column.selectOption.editOption({ index: 2, columnTitle: 'MultiSelect', newOption: 'New Option 3' });
+    await grid.column.selectOption.editOption({
+      index: 2,
+      columnTitle: 'MultiSelect',
+      newOption: 'MultiSelect New Option 3',
+    });
     await grid.cell.selectOption.verify({
       index: 0,
       columnHeader: 'MultiSelect',
-      option: 'New Option 3',
+      option: 'MultiSelect New Option 3',
       multiSelect: true,
     });
 
     await grid.cell.selectOption.verifyOptions({
       index: 0,
       columnHeader: 'MultiSelect',
-      options: ['Option 1', 'Option 2', 'New Option 3'],
+      options: ['Option 1', 'Option 2', 'MultiSelect New Option 3'],
     });
 
     await grid.deleteRow(0);