From 75c1c202a9479347dd607c8b2c16a5ffa87ba8f1 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Sat, 29 Oct 2022 16:20:07 +0530
Subject: [PATCH] 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         |  2 +-
 packages/nc-gui/components/cell/DateTimePicker.vue     | 10 ++++++----
 packages/nc-gui/components/cell/Rating.vue             |  6 +-----
 packages/nc-gui/components/cell/TimePicker.vue         |  2 +-
 packages/nc-gui/components/cell/YearPicker.vue         |  2 +-
 packages/nc-gui/components/smartsheet/Grid.vue         |  8 +++++++-
 packages/nc-gui/components/virtual-cell/BelongsTo.vue  |  2 +-
 packages/nc-gui/components/virtual-cell/HasMany.vue    |  2 +-
 packages/nc-gui/components/virtual-cell/ManyToMany.vue |  4 ++--
 .../components/virtual-cell/components/ListItems.vue   |  1 -
 10 files changed, 21 insertions(+), 18 deletions(-)

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"
   >
     <template #suffixIcon></template>
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
 </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" />
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 @@
 <script lang="ts" setup>
-import { useEventListener } from '@vueuse/core'
 import { RelationTypes, UITypes } from 'nocodb-sdk'
 import type { ColumnType, LinkToAnotherRecordType } from 'nocodb-sdk'
 import {