fix: decide editable state based on both editEnabled and active

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

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

@@ -27,6 +27,7 @@ import {
   useRoles,
   useSelectedCellKeyupListener,
   watch,
+  EditModeInj
 } from '#imports'
 import MdiCloseCircle from '~icons/mdi/close-circle'
 
@@ -92,9 +93,13 @@ 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))
 
-const editAllowed = computed(() => (hasEditRoles.value || isForm.value) && active.value)
+// 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 vModel = computed({
   get: () => {

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

@@ -23,6 +23,7 @@ import {
   useRoles,
   useSelectedCellKeyupListener,
   watch,
+  EditModeInj
 } from '#imports'
 
 interface Props {
@@ -51,6 +52,8 @@ const isPublic = inject(IsPublicInj, ref(false))
 
 const isForm = inject(IsFormInj, ref(false))
 
+const isEditable = inject(EditModeInj, ref(false))
+
 const { $api } = useNuxtApp()
 
 const searchVal = ref()
@@ -89,7 +92,9 @@ const isOptionMissing = computed(() => {
 
 const hasEditRoles = computed(() => hasRole('owner', true) || hasRole('creator', true) || hasRole('editor', true))
 
-const editAllowed = computed(() => (hasEditRoles.value || isForm.value) && active.value)
+// 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 vModel = computed({
   get: () => tempSelectedOptState.value ?? modelValue,