fix: select not working

packages/nc-gui/components/smartsheet/Cell.vue

@@ -1,9 +1,10 @@
 <script setup lang="ts">
 import type { ColumnType } from 'nocodb-sdk'
-import { UITypes, isSystemColumn } from 'nocodb-sdk'
+import { isSystemColumn } from 'nocodb-sdk'
 import {
   ActiveCellInj,
   ColumnInj,
+  EditColumnInj,
   EditModeInj,
   IsFormInj,
   IsLockedInj,
@@ -87,7 +88,7 @@ const isLocked = inject(IsLockedInj, ref(false))
 
 const isSurveyForm = inject(IsSurveyFormInj, ref(false))
 
-const isAdvancedOption = inject('isAdvancedOption', ref(false))
+const isEditColumnMenu = inject(EditColumnInj, ref(false))
 
 const { currentRow } = useSmartsheetRowStoreOrThrow()
 
@@ -111,7 +112,7 @@ const vModel = computed({
     return props.modelValue
   },
   set: (val) => {
-    if (isAdvancedOption.value) {
+    if (isEditColumnMenu.value) {
       column.value.cdf = val
       emit('update:value', val)
     } else if (val !== props.modelValue) {
@@ -179,7 +180,7 @@ function initIntersectionObserver() {
 }
 
 const numberInputAlignment = computed(() => {
-  return isAdvancedOption.value ? 'left' : 'right'
+  return isEditColumnMenu.value ? 'left' : 'right'
 })
 // observe the cell when it is mounted
 onMounted(() => {
@@ -209,20 +210,20 @@ onUnmounted(() => {
   >
     <template v-if="column">
       <template v-if="intersected">
-        <LazyCellTextArea v-if="isTextArea(column)" v-model="vModel" :is-focus="!isAdvancedOption" />
+        <LazyCellTextArea v-if="isTextArea(column)" v-model="vModel" :is-focus="!isEditColumnMenu" />
         <LazyCellGeoData v-else-if="isGeoData(column)" v-model="vModel" />
         <LazyCellCheckbox v-else-if="isBoolean(column, abstractType)" v-model="vModel" />
         <LazyCellAttachment v-else-if="isAttachment(column)" v-model="vModel" :row-index="props.rowIndex" />
         <LazyCellSingleSelect
           v-else-if="isSingleSelect(column)"
           v-model="vModel"
-          :disable-option-creation="!!isAdvancedOption"
+          :disable-option-creation="!!isEditColumnMenu"
           :row-index="props.rowIndex"
         />
         <LazyCellMultiSelect
           v-else-if="isMultiSelect(column)"
           v-model="vModel"
-          :disable-option-creation="!!isAdvancedOption"
+          :disable-option-creation="!!isEditColumnMenu"
           :row-index="props.rowIndex"
         />
         <LazyCellDatePicker v-else-if="isDate(column, abstractType)" v-model="vModel" :is-pk="isPrimaryKey(column)" />
@@ -235,18 +236,18 @@ onUnmounted(() => {
         />
         <LazyCellTimePicker v-else-if="isTime(column, abstractType)" v-model="vModel" :is-pk="isPrimaryKey(column)" />
         <LazyCellRating v-else-if="isRating(column)" v-model="vModel" />
-        <LazyCellDuration v-else-if="isDuration(column)" v-model="vModel" :is-focus="!isAdvancedOption" />
-        <LazyCellEmail v-else-if="isEmail(column)" v-model="vModel" :is-focus="!isAdvancedOption" />
-        <LazyCellUrl v-else-if="isURL(column)" v-model="vModel" :is-focus="!isAdvancedOption" />
-        <LazyCellPhoneNumber v-else-if="isPhoneNumber(column)" v-model="vModel" :is-focus="!isAdvancedOption" />
-        <LazyCellPercent v-else-if="isPercent(column)" v-model="vModel" :is-focus="!isAdvancedOption" />
-        <LazyCellCurrency v-else-if="isCurrency(column)" v-model="vModel" :is-focus="!isAdvancedOption" @save="emit('save')" />
-        <LazyCellDecimal v-else-if="isDecimal(column)" v-model="vModel" :is-focus="!isAdvancedOption" />
-        <LazyCellInteger v-else-if="isInt(column, abstractType)" v-model="vModel" :is-focus="!isAdvancedOption" />
-        <LazyCellFloat v-else-if="isFloat(column, abstractType)" v-model="vModel" :is-focus="!isAdvancedOption" />
-        <LazyCellText v-else-if="isString(column, abstractType)" v-model="vModel" :is-focus="!isAdvancedOption" />
+        <LazyCellDuration v-else-if="isDuration(column)" v-model="vModel" :is-focus="!isEditColumnMenu" />
+        <LazyCellEmail v-else-if="isEmail(column)" v-model="vModel" :is-focus="!isEditColumnMenu" />
+        <LazyCellUrl v-else-if="isURL(column)" v-model="vModel" :is-focus="!isEditColumnMenu" />
+        <LazyCellPhoneNumber v-else-if="isPhoneNumber(column)" v-model="vModel" :is-focus="!isEditColumnMenu" />
+        <LazyCellPercent v-else-if="isPercent(column)" v-model="vModel" :is-focus="!isEditColumnMenu" />
+        <LazyCellCurrency v-else-if="isCurrency(column)" v-model="vModel" :is-focus="!isEditColumnMenu" @save="emit('save')" />
+        <LazyCellDecimal v-else-if="isDecimal(column)" v-model="vModel" :is-focus="!isEditColumnMenu" />
+        <LazyCellInteger v-else-if="isInt(column, abstractType)" v-model="vModel" :is-focus="!isEditColumnMenu" />
+        <LazyCellFloat v-else-if="isFloat(column, abstractType)" v-model="vModel" :is-focus="!isEditColumnMenu" />
+        <LazyCellText v-else-if="isString(column, abstractType)" v-model="vModel" :is-focus="!isEditColumnMenu" />
         <LazyCellJson v-else-if="isJSON(column)" v-model="vModel" />
-        <LazyCellText v-else v-model="vModel" :is-focus="!isAdvancedOption" />
+        <LazyCellText v-else v-model="vModel" :is-focus="!isEditColumnMenu" />
         <div
           v-if="(isLocked || (isPublic && readOnly && !isForm) || isSystemColumn(column)) && !isAttachment(column)"
           class="nc-locked-overlay"

packages/nc-gui/components/smartsheet/column/DefaultValue.vue

@@ -1,12 +1,17 @@
 <script lang="ts" setup>
+import { UITypes } from 'nocodb-sdk'
+import MdiPlusIcon from '~icons/mdi/plus-circle-outline'
+
 const props = defineProps<{
   value: any
 }>()
 const emit = defineEmits(['update:value'])
 
+const enableDefaultOption = ref(false)
+
 const column = inject(ColumnInj)
 
-provide('isAdvancedOption', ref(true))
+provide(EditColumnInj, ref(true))
 
 const rowRef = ref({
   row: {},
@@ -15,16 +20,44 @@ const rowRef = ref({
     isUpdatedFromCopyNPaste: [column?.value.title],
   },
 })
-
 const vModel = useVModel(props, 'value', emit)
 
+const cdfValue = computed({
+  get: () => {
+    if (column?.value.uidt === UITypes.MultiSelect || column?.value.uidt === UITypes.SingleSelect) {
+      return vModel.value.cdf?.replaceAll("'", '')
+    }
+    return vModel.value.cdf
+  },
+  set: (value) => {
+    vModel.value.cdf = value
+  },
+})
+
 useProvideSmartsheetRowStore(vModel, rowRef)
 </script>
 
 <template>
-  <p class="mt-3 text-[0.75rem]">Default Value</p>
-  <div class="border-1 px-1 my-[-4px] border-gray-300 rounded-md">
-    <LazySmartsheetCell :column="vModel" :model-value="vModel.cdf" :edit-enabled="true" />
+  <span v-if="!enableDefaultOption && !vModel.cdf" class="cursor-pointer" @click="enableDefaultOption = !enableDefaultOption">
+    <MdiPlusIcon class="text-gray-600" />
+    Set Default Value
+  </span>
+  <div v-else>
+    <p class="mt-3 text-gray-900">Default Value</p>
+    <div class="flex flex-row gap-2">
+      <div class="border-1 w-full px-1 my-[-4px] border-gray-300 rounded-md">
+        <LazySmartsheetCell :column="vModel" :model-value="cdfValue" :edit-enabled="true" />
+      </div>
+      <MdiDeleteOutline
+        class="w-6 h-6 text-red-500 cursor-pointer"
+        @click="
+          () => {
+            vModel.cdf = null
+            enableDefaultOption = false
+          }
+        "
+      />
+    </div>
   </div>
 </template>
 

packages/nc-gui/components/smartsheet/column/EditOrAdd.vue

@@ -22,7 +22,6 @@ import {
   useProject,
   watchEffect,
 } from '#imports'
-import MdiPlusIcon from '~icons/mdi/plus-circle-outline'
 import MdiMinusIcon from '~icons/mdi/minus-circle-outline'
 import MdiIdentifierIcon from '~icons/mdi/identifier'
 
@@ -301,18 +300,20 @@ if (props.fromTableExplorer) {
           {{ `Accept only valid ${formState.uidt}` }}
         </span>
       </a-checkbox>
-      <!--
+      <div class="mt-3">
+        <!--
         Default Value for JSON & LongText is not supported in MySQL 
          Default Value is Disabled for MSSQL -->
-      <LazySmartsheetColumnDefaultValue
-        v-if="
+        <LazySmartsheetColumnDefaultValue
+          v-if="
           !isVirtualCol(formState) &&
           !isAttachment(formState) &&
           !isMssql(meta!.base_id) &&
           !(isMysql(meta!.base_id) && (isJSON(formState) || isTextArea(formState)))
-        "
-        v-model:value="formState"
-      />
+          "
+          v-model:value="formState"
+        />
+      </div>
 
       <div
         v-if="!props.hideAdditionalOptions && !isVirtualCol(formState.uidt) && !appInfo.ee"

packages/nc-gui/components/smartsheet/column/SelectOptions.vue

@@ -185,14 +185,13 @@ watch(inputs, () => {
   }
 })
 
+// Removes the Select Option from cdf if the option is removed
 watch(vModel.value, (next) => {
-  if (vModel.value.uidt === UITypes.MultiSelect) {
-    const cdfs = next.cdf.split(',')
-    const values = next.colOptions.options.map((col) => {
-      return col.title
-    })
-    vModel.value.cdf = cdfs.filter((c: string) => values.includes(c)).join(',')
-  }
+  const cdfs = (next.cdf ?? '').replaceAll("'", '').split(',')
+  const values = (next.colOptions.options ?? []).map((col) => {
+    return col.title.replaceAll("'", '')
+  })
+  next.cdf = cdfs.filter((c: string) => values.includes(c)).join(',')
 })
 </script>
 

packages/nc-gui/context/index.ts

@@ -41,6 +41,7 @@ export const DocsLocalPageInj: InjectionKey<Ref<PageSidebarNode | undefined>> =
 export const ProjectRoleInj: InjectionKey<Ref<string | string[]>> = Symbol('project-roles-injection')
 export const ProjectInj: InjectionKey<Ref<NcProject>> = Symbol('project-injection')
 export const ProjectIdInj: InjectionKey<Ref<string>> = Symbol('project-id-injection')
+export const EditColumnInj: InjectionKey<Ref<boolean>> = Symbol('edit-column-injection')
 export const TreeViewInj: InjectionKey<{
   setMenuContext: (type: 'project' | 'base' | 'table' | 'main' | 'layout', value?: any) => void
   duplicateTable: (table: TableType) => void

packages/nocodb/src/schema/swagger.json

@@ -20862,7 +20862,6 @@
         ],
         "oneOf": [
           {
-            "maxLength": 255,
             "type": "string"
           },
           {