fix: allow toggling picker if cell is in editable state

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

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

@@ -1,6 +1,16 @@
 <script setup lang="ts">
 import dayjs from 'dayjs'
-import { ActiveCellInj, ColumnInj, ReadonlyInj, computed, inject, ref, useSelectedCellKeyupListener, watch } from '#imports'
+import {
+  ActiveCellInj,
+  ColumnInj,
+  EditModeInj,
+  ReadonlyInj,
+  computed,
+  inject,
+  ref,
+  useSelectedCellKeyupListener,
+  watch,
+} from '#imports'
 
 interface Props {
   modelValue?: string | null
@@ -17,6 +27,8 @@ const readOnly = inject(ReadonlyInj, ref(false))
 
 const active = inject(ActiveCellInj, ref(false))
 
+const editable = inject(EditModeInj, ref(false))
+
 let isDateInvalid = $ref(false)
 
 const dateFormat = $computed(() => columnMeta?.value?.meta?.date_format ?? 'YYYY-MM-DD')
@@ -84,8 +96,8 @@ useSelectedCellKeyupListener(active, (e: KeyboardEvent) => {
     :allow-clear="!readOnly && !localState && !isPk"
     :input-read-only="true"
     :dropdown-class-name="`${randomClass} nc-picker-date ${open ? 'active' : ''}`"
-    :open="(readOnly || (localState && isPk)) && !active ? false : open"
+    :open="(readOnly || (localState && isPk)) && !active && !editable ? false : open"
-    @click="open = !open"
+    @click="open = (active || editable) && !open"
   >
     <template #suffixIcon></template>
   </a-date-picker>

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

@@ -17,6 +17,8 @@ const readOnly = inject(ReadonlyInj, ref(false))
 
 const active = inject(ActiveCellInj, ref(false))
 
+const editable = inject(EditModeInj, ref(false))
+
 let isDateInvalid = $ref(false)
 
 const dateFormat = isMysql ? 'YYYY-MM-DD HH:mm:ss' : 'YYYY-MM-DD HH:mm:ssZ'
@@ -84,9 +86,9 @@ useSelectedCellKeyupListener(active, (e: KeyboardEvent) => {
     :allow-clear="!readOnly && !localState && !isPk"
     :input-read-only="true"
     :dropdown-class-name="`${randomClass} nc-picker-datetime ${open ? 'active' : ''}`"
-    :open="readOnly || (localState && isPk) ? false : open && active"
+    :open="readOnly || (localState && isPk) ? false : open && (active || editable)"
     :disabled="readOnly || (localState && isPk)"
-    @click="open = active && !open"
+    @click="open = (active || editable) && !open"
     @ok="open = !open"
   >
     <template #suffixIcon></template>

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

@@ -17,6 +17,8 @@ const readOnly = inject(ReadonlyInj, ref(false))
 
 const active = inject(ActiveCellInj, ref(false))
 
+const editable = inject(EditModeInj, ref(false))
+
 let isTimeInvalid = $ref(false)
 
 const dateFormat = isMysql.value ? 'YYYY-MM-DD HH:mm:ss' : 'YYYY-MM-DD HH:mm:ssZ'
@@ -94,9 +96,9 @@ useSelectedCellKeyupListener(active, (e: KeyboardEvent) => {
     :placeholder="isTimeInvalid ? 'Invalid time' : ''"
     :allow-clear="!readOnly && !localState && !isPk"
     :input-read-only="true"
-    :open="(readOnly || (localState && isPk)) && !active ? false : open"
+    :open="(readOnly || (localState && isPk)) && !active && !editable ? false : open"
     :popup-class-name="`${randomClass} nc-picker-time ${open ? 'active' : ''}`"
-    @click="open = active && !open"
+    @click="open = (active || editable) && !open"
     @ok="open = !open"
   >
     <template #suffixIcon></template>

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

@@ -15,6 +15,8 @@ const readOnly = inject(ReadonlyInj, ref(false))
 
 const active = inject(ActiveCellInj, ref(false))
 
+const editable = inject(EditModeInj, ref(false))
+
 let isYearInvalid = $ref(false)
 
 const localState = $computed({
@@ -81,10 +83,10 @@ useSelectedCellKeyupListener(active, (e: KeyboardEvent) => {
     :placeholder="placeholder"
     :allow-clear="!readOnly && !localState && !isPk"
     :input-read-only="true"
-    :open="(readOnly || (localState && isPk)) && !active ? false : open"
+    :open="(readOnly || (localState && isPk)) && !active && !editable ? false : open"
     :dropdown-class-name="`${randomClass} nc-picker-year ${open ? 'active' : ''}`"
-    @click="open = active && !open"
+    @click="open = (active || editable) && !open"
-    @change="open = active && !open"
+    @change="open = (active || editable) && !open"
   >
     <template #suffixIcon></template>
   </a-date-picker>

packages/nc-gui/components/virtual-cell/components/ListItems.vue

@@ -118,13 +118,14 @@ useSelectedCellKeyupListener(vModel, (e: KeyboardEvent) => {
       selectedRowIndex.value = Math.min(childrenExcludedList.value?.list?.length - 1, selectedRowIndex.value + 1)
       e.stopPropagation()
       break
-    case 'Enter': {
+    case 'Enter':
-      const selectedRow = childrenExcludedList.value?.list?.[selectedRowIndex.value]
+      {
-      if (selectedRow) {
+        const selectedRow = childrenExcludedList.value?.list?.[selectedRowIndex.value]
-        linkRow(selectedRow)
+        if (selectedRow) {
-        e.stopPropagation()
+          linkRow(selectedRow)
+          e.stopPropagation()
+        }
       }
-    }
       break
   }
 })