fix(gui): single select cell related bugs

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

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

@@ -192,57 +192,58 @@ const toggleMenu = (e: Event) => {
 </script>
 
 <template>
-  <a-select
+  <div class="h-full w-full flex items-center" @click="toggleMenu">
-    ref="aselect"
+    <a-select
-    v-model:value="vModel"
+      ref="aselect"
-    class="w-full"
+      v-model:value="vModel"
-    :class="{ 'caret-transparent': !hasEditRoles }"
+      class="w-full"
-    :allow-clear="!column.rqd && editAllowed"
+      :class="{ 'caret-transparent': !hasEditRoles }"
-    :bordered="false"
+      :allow-clear="!column.rqd && editAllowed"
-    :open="isOpen"
+      :bordered="false"
-    :disabled="readOnly"
+      :open="isOpen && (active || editable)"
-    :show-arrow="hasEditRoles && !readOnly && (editable || (active && vModel === null))"
+      :disabled="readOnly"
-    :dropdown-class-name="`nc-dropdown-single-select-cell ${isOpen ? 'active' : ''}`"
+      :show-arrow="hasEditRoles && !readOnly && (editable || (active && vModel === null))"
-    show-search
+      :dropdown-class-name="`nc-dropdown-single-select-cell ${isOpen ? 'active' : ''}`"
-    @select="isOpen = false"
+      :show-search="isOpen && (active || editable)"
-    @keydown.stop
+      @select="isOpen = false"
-    @search="search"
+      @keydown.stop
-    @click="toggleMenu"
+      @search="search"
-  >
-    <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">
+      <a-select-option
-        <span
+        v-for="op of options"
-          :style="{
+        :key="op.title"
-            'color': tinycolor.isReadable(op.color || '#ccc', '#fff', { level: 'AA', size: 'large' })
+        :value="op.title"
-              ? '#fff'
+        :data-testid="`select-option-${column.title}-${rowIndex}`"
-              : tinycolor.mostReadable(op.color || '#ccc', ['#0b1d05', '#fff']).toHex8String(),
+        @click.stop
-            'font-size': '13px',
+      >
-          }"
+        <a-tag class="rounded-tag" :color="op.color">
-          :class="{ 'text-sm': isKanban }"
+          <span
-        >
+            :style="{
-          {{ op.title }}
+              'color': tinycolor.isReadable(op.color || '#ccc', '#fff', { level: 'AA', size: 'large' })
-        </span>
+                ? '#fff'
-      </a-tag>
+                : tinycolor.mostReadable(op.color || '#ccc', ['#0b1d05', '#fff']).toHex8String(),
-    </a-select-option>
+              'font-size': '13px',
-    <a-select-option
+            }"
-      v-if="searchVal && isOptionMissing && !isPublic && (hasRole('owner', true) || hasRole('creator', true))"
+            :class="{ 'text-sm': isKanban }"
-      :key="searchVal"
+          >
-      :value="searchVal"
+            {{ op.title }}
-    >
+          </span>
-      <div class="flex gap-2 text-gray-500 items-center h-full">
+        </a-tag>
-        <MdiPlusThick class="min-w-4" />
+      </a-select-option>
-        <div class="text-xs whitespace-normal">
+      <a-select-option
-          Create new option named <strong>{{ searchVal }}</strong>
+        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-option>
+    </a-select>
-  </a-select>
+  </div>
 </template>
 
 <style scoped lang="scss">

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'