fix: decide active state based on both editEnabled and active

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

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

@@ -46,7 +46,13 @@ const column = inject(ColumnInj)!
 
 const readOnly = inject(ReadonlyInj)!
 
-const active = inject(ActiveCellInj, ref(false))
+const isEditable = inject(EditModeInj, ref(false))
+
+const _active = inject(ActiveCellInj, ref(false))
+
+// use both ActiveCellInj or EditModeInj to determine the active state
+// since active will be false in case of form view
+const active = computed(() => _active.value || isEditable.value)
 
 const isPublic = inject(IsPublicInj, ref(false))
 
@@ -93,13 +99,9 @@ const isOptionMissing = computed(() => {
   return (options.value ?? []).every((op) => op.title !== searchVal.value)
 })
 
-const isEditable = inject(EditModeInj, ref(false))
-
 const hasEditRoles = computed(() => hasRole('owner', true) || hasRole('creator', true) || hasRole('editor', true))
 
-// use both active or edit mode to determine if edit is allowed
-// since active will be false in case of form view
-const editAllowed = computed(() => (hasEditRoles.value || isForm.value) && (active.value || isEditable.value))
+const editAllowed = computed(() => (hasEditRoles.value || isForm.value) && (active.value))
 
 const vModel = computed({
   get: () => {

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

@@ -40,7 +40,13 @@ const column = inject(ColumnInj)!
 
 const readOnly = inject(ReadonlyInj)!
 
-const active = inject(ActiveCellInj, ref(false))
+const isEditable = inject(EditModeInj, ref(false))
+
+const _active = inject(ActiveCellInj, ref(false))
+
+// use both ActiveCellInj or EditModeInj to determine the active state
+// since active will be false in case of form view
+const active = computed(() => _active.value || isEditable.value)
 
 const aselect = ref<typeof AntSelect>()
 
@@ -52,8 +58,6 @@ const isPublic = inject(IsPublicInj, ref(false))
 
 const isForm = inject(IsFormInj, ref(false))
 
-const isEditable = inject(EditModeInj, ref(false))
-
 const { $api } = useNuxtApp()
 
 const searchVal = ref()
@@ -92,9 +96,7 @@ const isOptionMissing = computed(() => {
 
 const hasEditRoles = computed(() => hasRole('owner', true) || hasRole('creator', true) || hasRole('editor', true))
 
-// use both active or edit mode to determine if edit is allowed
-// since active will be false in case of form view
-const editAllowed = computed(() => (hasEditRoles.value || isForm.value) && (active.value || isEditable.value))
+const editAllowed = computed(() => (hasEditRoles.value || isForm.value) && (active.value))
 
 const vModel = computed({
   get: () => tempSelectedOptState.value ?? modelValue,
@@ -255,7 +257,7 @@ const selectedOpt = computed(() => {
 
 <template>
   <div class="h-full w-full flex items-center nc-single-select" :class="{ 'read-only': readOnly }" @click="toggleMenu">
-    <div v-if="!active">
+    <div v-if="!(active || isEditable) ">
       <a-tag v-if="selectedOpt" class="rounded-tag" :color="selectedOpt.color">
         <span
           :style="{