fix(gui): make select field editable in form view

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

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

@@ -5,6 +5,7 @@ import type { SelectOptionType, SelectOptionsType } from 'nocodb-sdk'
 import {
   ActiveCellInj,
   ColumnInj,
+  EditModeInj,
   IsKanbanInj,
   ReadonlyInj,
   computed,
@@ -36,6 +37,8 @@ const readOnly = inject(ReadonlyInj)!
 
 const active = inject(ActiveCellInj, ref(false))
 
+const editable = inject(EditModeInj, ref(false))
+
 const selectedIds = ref<string[]>([])
 
 const aselect = ref<typeof AntSelect>()
@@ -86,8 +89,6 @@ const selectedTitles = computed(() =>
     : [],
 )
 
-const v = Math.floor(Math.random() * 1000)
-
 const handleClose = (e: MouseEvent) => {
   if (aselect.value && !aselect.value.$el.contains(e.target)) {
     isOpen.value = false
@@ -157,7 +158,7 @@ useSelectedCellKeyupListener(active, (e) => {
     :class="{ '!ml-[-8px]': readOnly }"
     :dropdown-class-name="`nc-dropdown-multi-select-cell ${isOpen ? 'active' : ''}`"
     @keydown.enter.stop
-    @click="isOpen = active && !isOpen"
+    @click="isOpen = (active || editable) && !isOpen"
   >
     <a-select-option
       v-for="op of options"
@@ -187,7 +188,7 @@ useSelectedCellKeyupListener(active, (e) => {
         class="rounded-tag"
         :style="{ display: 'flex', alignItems: 'center' }"
         :color="options.find((el) => el.title === val)?.color"
-        :closable="active && (vModel.length > 1 || !column?.rqd)"
+        :closable="(active || editable) && (vModel.length > 1 || !column?.rqd)"
         :close-icon="h(MdiCloseCircle, { class: ['ms-close-icon'] })"
         @close="onClose"
       >

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

@@ -2,7 +2,18 @@
 import tinycolor from 'tinycolor2'
 import type { Select as AntSelect } from 'ant-design-vue'
 import type { SelectOptionType } from 'nocodb-sdk'
-import { ActiveCellInj, ColumnInj, IsKanbanInj, ReadonlyInj, computed, inject, ref, useEventListener, watch } from '#imports'
+import {
+  ActiveCellInj,
+  ColumnInj,
+  EditModeInj,
+  IsKanbanInj,
+  ReadonlyInj,
+  computed,
+  inject,
+  ref,
+  useEventListener,
+  watch,
+} from '#imports'
 import { useSelectedCellKeyupListener } from '~/composables/useSelectedCellKeyupListener'
 
 interface Props {
@@ -20,6 +31,8 @@ const readOnly = inject(ReadonlyInj)!
 
 const active = inject(ActiveCellInj, ref(false))
 
+const editable = inject(EditModeInj, ref(false))
+
 const aselect = ref<typeof AntSelect>()
 
 const isOpen = ref(false)
@@ -85,11 +98,11 @@ useSelectedCellKeyupListener(active, (e) => {
     :bordered="false"
     :open="isOpen"
     :disabled="readOnly"
-    :show-arrow="!readOnly && (active || vModel === null)"
+    :show-arrow="!readOnly && (active || editable || vModel === null)"
     :dropdown-class-name="`nc-dropdown-single-select-cell ${isOpen ? 'active' : ''}`"
     @select="isOpen = false"
     @keydown.enter.stop
-    @click="isOpen = active && !isOpen"
+    @click="isOpen = (active || editable) && !isOpen"
   >
     <a-select-option
       v-for="op of options"

packages/nc-gui/components/smartsheet/expanded-form/index.vue

@@ -137,7 +137,7 @@ export default {
     :body-style="{ 'padding': 0, 'display': 'flex', 'flex-direction': 'column' }"
     :closable="false"
     class="nc-drawer-expanded-form"
-    :class="{ 'active': isExpanded }"
+    :class="{ active: isExpanded }"
   >
     <SmartsheetExpandedFormHeader :view="props.view" @cancel="onClose" />