diff --git a/packages/nc-gui/components/cell/DatePicker.vue b/packages/nc-gui/components/cell/DatePicker.vue
index f515e0873c..bb082b6f73 100644
--- a/packages/nc-gui/components/cell/DatePicker.vue
+++ b/packages/nc-gui/components/cell/DatePicker.vue
@@ -81,7 +81,7 @@ useSelectedCellKeyupListener(inject(ActiveCellInj, ref(false)), (e: KeyboardEven
:placeholder="placeholder"
:allow-clear="!readOnly && !localState && !isPk"
:input-read-only="true"
- :dropdown-class-name="`${randomClass} nc-picker-date`"
+ :dropdown-class-name="`${randomClass} nc-picker-date ${open ? 'active' : ''}`"
:open="readOnly || (localState && isPk) ? false : open"
@click="open = !open"
>
diff --git a/packages/nc-gui/components/cell/DateTimePicker.vue b/packages/nc-gui/components/cell/DateTimePicker.vue
index 5c16909add..3acae997e3 100644
--- a/packages/nc-gui/components/cell/DateTimePicker.vue
+++ b/packages/nc-gui/components/cell/DateTimePicker.vue
@@ -15,6 +15,8 @@ const { isMysql } = useProject()
const readOnly = inject(ReadonlyInj, ref(false))
+const active = inject(ActiveCellInj, ref(false))
+
let isDateInvalid = $ref(false)
const dateFormat = isMysql ? 'YYYY-MM-DD HH:mm:ss' : 'YYYY-MM-DD HH:mm:ssZ'
@@ -57,7 +59,7 @@ watch(
{ flush: 'post' },
)
-useSelectedCellKeyupListener(inject(ActiveCellInj, ref(false)), (e: KeyboardEvent) => {
+useSelectedCellKeyupListener(active, (e: KeyboardEvent) => {
switch (e.key) {
case 'Enter':
e.stopPropagation()
@@ -81,10 +83,10 @@ useSelectedCellKeyupListener(inject(ActiveCellInj, ref(false)), (e: KeyboardEven
:placeholder="isDateInvalid ? 'Invalid date' : ''"
:allow-clear="!readOnly && !localState && !isPk"
:input-read-only="true"
- :dropdown-class-name="`${randomClass} nc-picker-datetime`"
- :open="readOnly || (localState && isPk) ? false : open"
+ :dropdown-class-name="`${randomClass} nc-picker-datetime ${open ? 'active' : ''}`"
+ :open="readOnly || (localState && isPk) ? false : open && active"
:disabled="readOnly || (localState && isPk)"
- @click="open = !open"
+ @click="open = active && !open"
@ok="open = !open"
>
diff --git a/packages/nc-gui/components/cell/Rating.vue b/packages/nc-gui/components/cell/Rating.vue
index 51aadec80d..44308292e6 100644
--- a/packages/nc-gui/components/cell/Rating.vue
+++ b/packages/nc-gui/components/cell/Rating.vue
@@ -37,11 +37,7 @@ useSelectedCellKeyupListener(inject(ActiveCellInj, ref(false)), (e: KeyboardEven
-
+
diff --git a/packages/nc-gui/components/cell/TimePicker.vue b/packages/nc-gui/components/cell/TimePicker.vue
index ccc96c541a..c4a05298ba 100644
--- a/packages/nc-gui/components/cell/TimePicker.vue
+++ b/packages/nc-gui/components/cell/TimePicker.vue
@@ -93,7 +93,7 @@ useSelectedCellKeyupListener(inject(ActiveCellInj, ref(false)), (e: KeyboardEven
:allow-clear="!readOnly && !localState && !isPk"
:input-read-only="true"
:open="readOnly || (localState && isPk) ? false : open"
- :popup-class-name="`${randomClass} nc-picker-time`"
+ :popup-class-name="`${randomClass} nc-picker-time ${open ? 'active' : ''}`"
@click="open = !open"
@ok="open = !open"
>
diff --git a/packages/nc-gui/components/cell/YearPicker.vue b/packages/nc-gui/components/cell/YearPicker.vue
index f4d3c68625..e9d25f8f03 100644
--- a/packages/nc-gui/components/cell/YearPicker.vue
+++ b/packages/nc-gui/components/cell/YearPicker.vue
@@ -80,7 +80,7 @@ useSelectedCellKeyupListener(inject(ActiveCellInj, ref(false)), (e: KeyboardEven
:allow-clear="!readOnly && !localState && !isPk"
:input-read-only="true"
:open="readOnly || (localState && isPk) ? false : open"
- :dropdown-class-name="`${randomClass} nc-picker-year`"
+ :dropdown-class-name="`${randomClass} nc-picker-year ${open ? 'active' : ''}`"
@click="open = !open"
@change="open = !open"
>
diff --git a/packages/nc-gui/components/smartsheet/Grid.vue b/packages/nc-gui/components/smartsheet/Grid.vue
index 52c97c1d87..eea6425bd1 100644
--- a/packages/nc-gui/components/smartsheet/Grid.vue
+++ b/packages/nc-gui/components/smartsheet/Grid.vue
@@ -325,7 +325,7 @@ useEventListener(document, 'keyup', async (e: KeyboardEvent) => {
/** On clicking outside of table reset active cell */
const smartTable = ref(null)
-onClickOutside(smartTable, () => {
+onClickOutside(smartTable, (e: PointerEvent) => {
clearRangeRows()
if (selected.col === null) return
@@ -333,6 +333,12 @@ onClickOutside(smartTable, () => {
if (editEnabled && (isVirtualCol(activeCol) || activeCol.uidt === UITypes.JSON)) return
+ // ignore unselecting if clicked inside or on the picker(Date, Time, DateTime, Year)
+ const activePickerEl = document.querySelector(
+ '.nc-picker-datetime.active,.nc-picker-date.active,.nc-picker-year.active,.nc-picker-time.active',
+ )
+ if (e.target && activePickerEl && (activePickerEl === e.target || activePickerEl?.contains(e.target as Element))) return
+
selected.row = null
selected.col = null
})
diff --git a/packages/nc-gui/components/virtual-cell/BelongsTo.vue b/packages/nc-gui/components/virtual-cell/BelongsTo.vue
index f2bc101d45..9801697c76 100644
--- a/packages/nc-gui/components/virtual-cell/BelongsTo.vue
+++ b/packages/nc-gui/components/virtual-cell/BelongsTo.vue
@@ -15,9 +15,9 @@ import {
inject,
ref,
useProvideLTARStore,
+ useSelectedCellKeyupListener,
useSmartsheetRowStoreOrThrow,
useUIPermission,
- useSelectedCellKeyupListener
} from '#imports'
import MdiArrowExpand from '~icons/mdi/arrow-expand'
import MdiPlus from '~icons/mdi/plus'
diff --git a/packages/nc-gui/components/virtual-cell/HasMany.vue b/packages/nc-gui/components/virtual-cell/HasMany.vue
index f992ac322c..86798d381a 100644
--- a/packages/nc-gui/components/virtual-cell/HasMany.vue
+++ b/packages/nc-gui/components/virtual-cell/HasMany.vue
@@ -13,9 +13,9 @@ import {
inject,
ref,
useProvideLTARStore,
+ useSelectedCellKeyupListener,
useSmartsheetRowStoreOrThrow,
useUIPermission,
- useSelectedCellKeyupListener
} from '#imports'
const column = inject(ColumnInj)!
diff --git a/packages/nc-gui/components/virtual-cell/ManyToMany.vue b/packages/nc-gui/components/virtual-cell/ManyToMany.vue
index fd07fe4687..bd094c6ff0 100644
--- a/packages/nc-gui/components/virtual-cell/ManyToMany.vue
+++ b/packages/nc-gui/components/virtual-cell/ManyToMany.vue
@@ -2,6 +2,7 @@
import type { ColumnType } from 'nocodb-sdk'
import type { Ref } from 'vue'
import {
+ ActiveCellInj,
CellValueInj,
ColumnInj,
IsFormInj,
@@ -14,10 +15,9 @@ import {
inject,
ref,
useProvideLTARStore,
+ useSelectedCellKeyupListener,
useSmartsheetRowStoreOrThrow,
useUIPermission,
- useSelectedCellKeyupListener,
- ActiveCellInj,
} from '#imports'
const column = inject(ColumnInj)!
diff --git a/packages/nc-gui/components/virtual-cell/components/ListItems.vue b/packages/nc-gui/components/virtual-cell/components/ListItems.vue
index 83994b9eeb..6cc9246b40 100644
--- a/packages/nc-gui/components/virtual-cell/components/ListItems.vue
+++ b/packages/nc-gui/components/virtual-cell/components/ListItems.vue
@@ -1,5 +1,4 @@