diff --git a/packages/nc-gui/components/cell/DatePicker.vue b/packages/nc-gui/components/cell/DatePicker.vue
index bb082b6f73..3578024d8f 100644
--- a/packages/nc-gui/components/cell/DatePicker.vue
+++ b/packages/nc-gui/components/cell/DatePicker.vue
@@ -15,6 +15,8 @@ const columnMeta = inject(ColumnInj, null)!
const readOnly = inject(ReadonlyInj, ref(false))
+const active = inject(ActiveCellInj, ref(false))
+
let isDateInvalid = $ref(false)
const dateFormat = $computed(() => columnMeta?.value?.meta?.date_format ?? 'YYYY-MM-DD')
@@ -58,7 +60,7 @@ watch(
const placeholder = computed(() => (isDateInvalid ? 'Invalid date' : ''))
-useSelectedCellKeyupListener(inject(ActiveCellInj, ref(false)), (e: KeyboardEvent) => {
+useSelectedCellKeyupListener(active, (e: KeyboardEvent) => {
switch (e.key) {
case 'Enter':
e.stopPropagation()
@@ -82,7 +84,7 @@ useSelectedCellKeyupListener(inject(ActiveCellInj, ref(false)), (e: KeyboardEven
:allow-clear="!readOnly && !localState && !isPk"
:input-read-only="true"
:dropdown-class-name="`${randomClass} nc-picker-date ${open ? 'active' : ''}`"
- :open="readOnly || (localState && isPk) ? false : open"
+ :open="(readOnly || (localState && isPk)) && !active ? false : open"
@click="open = !open"
>
diff --git a/packages/nc-gui/components/cell/TimePicker.vue b/packages/nc-gui/components/cell/TimePicker.vue
index c4a05298ba..84aed4eece 100644
--- a/packages/nc-gui/components/cell/TimePicker.vue
+++ b/packages/nc-gui/components/cell/TimePicker.vue
@@ -15,6 +15,8 @@ const { isMysql } = useProject()
const readOnly = inject(ReadonlyInj, ref(false))
+const active = inject(ActiveCellInj, ref(false))
+
let isTimeInvalid = $ref(false)
const dateFormat = isMysql.value ? 'YYYY-MM-DD HH:mm:ss' : 'YYYY-MM-DD HH:mm:ssZ'
@@ -66,7 +68,7 @@ watch(
{ flush: 'post' },
)
-useSelectedCellKeyupListener(inject(ActiveCellInj, ref(false)), (e: KeyboardEvent) => {
+useSelectedCellKeyupListener(active, (e: KeyboardEvent) => {
switch (e.key) {
case 'Enter':
e.stopPropagation()
@@ -92,9 +94,9 @@ useSelectedCellKeyupListener(inject(ActiveCellInj, ref(false)), (e: KeyboardEven
:placeholder="isTimeInvalid ? 'Invalid time' : ''"
:allow-clear="!readOnly && !localState && !isPk"
:input-read-only="true"
- :open="readOnly || (localState && isPk) ? false : open"
+ :open="(readOnly || (localState && isPk)) && !active ? false : open"
:popup-class-name="`${randomClass} nc-picker-time ${open ? 'active' : ''}`"
- @click="open = !open"
+ @click="open = active && !open"
@ok="open = !open"
>
diff --git a/packages/nc-gui/components/cell/YearPicker.vue b/packages/nc-gui/components/cell/YearPicker.vue
index e9d25f8f03..175d3dcced 100644
--- a/packages/nc-gui/components/cell/YearPicker.vue
+++ b/packages/nc-gui/components/cell/YearPicker.vue
@@ -13,6 +13,8 @@ const emit = defineEmits(['update:modelValue'])
const readOnly = inject(ReadonlyInj, ref(false))
+const active = inject(ActiveCellInj, ref(false))
+
let isYearInvalid = $ref(false)
const localState = $computed({
@@ -56,7 +58,7 @@ watch(
const placeholder = computed(() => (isYearInvalid ? 'Invalid year' : ''))
-useSelectedCellKeyupListener(inject(ActiveCellInj, ref(false)), (e: KeyboardEvent) => {
+useSelectedCellKeyupListener(active, (e: KeyboardEvent) => {
switch (e.key) {
case 'Enter':
e.stopPropagation()
@@ -79,10 +81,10 @@ useSelectedCellKeyupListener(inject(ActiveCellInj, ref(false)), (e: KeyboardEven
:placeholder="placeholder"
:allow-clear="!readOnly && !localState && !isPk"
:input-read-only="true"
- :open="readOnly || (localState && isPk) ? false : open"
+ :open="(readOnly || (localState && isPk)) && !active ? false : open"
:dropdown-class-name="`${randomClass} nc-picker-year ${open ? 'active' : ''}`"
- @click="open = !open"
- @change="open = !open"
+ @click="open = active && !open"
+ @change="open = active && !open"
>