feat(gui): ignore unselecting if clicking inside any picker element

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

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"
   >

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"
   >
     <template #suffixIcon></template>

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

@@ -37,11 +37,7 @@ useSelectedCellKeyupListener(inject(ActiveCellInj, ref(false)), (e: KeyboardEven
 </script>
 
 <template>
-  <a-rate
-    v-model:value="vModel"
-    :count="ratingMeta.max"
-    :style="`color: ${ratingMeta.color}; padding: 0px 5px`"
-  >
+  <a-rate v-model:value="vModel" :count="ratingMeta.max" :style="`color: ${ratingMeta.color}; padding: 0px 5px`">
     <template #character>
       <MdiStar v-if="ratingMeta.icon.full === 'mdi-star'" class="text-sm" />
       <MdiHeart v-if="ratingMeta.icon.full === 'mdi-heart'" class="text-sm" />

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"
   >

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"
   >

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
 })

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'

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)!

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)!

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

@@ -1,5 +1,4 @@
 <script lang="ts" setup>
-import { useEventListener } from '@vueuse/core'
 import { RelationTypes, UITypes } from 'nocodb-sdk'
 import type { ColumnType, LinkToAnotherRecordType } from 'nocodb-sdk'
 import {