feat(gui): ignore unselecting if clicking inside any picker(date,time and year) element

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

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

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

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