Merge pull request #5950 from nocodb/fix/5949-datepicker

fix: On selecting day close Datepicker

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

@@ -2,6 +2,7 @@
 import dayjs from 'dayjs'
 import {
   ActiveCellInj,
+  CellClickHookInj,
   ColumnInj,
   EditModeInj,
   ReadonlyInj,
@@ -165,6 +166,31 @@ useSelectedCellKeyupListener(active, (e: KeyboardEvent) => {
       break
   }
 })
+
+// use the default date picker open sync only to close the picker
+const updateOpen = (next: boolean) => {
+  if (open.value && !next) {
+    open.value = false
+  }
+}
+
+const cellClickHook = inject(CellClickHookInj, null)
+const cellClickHandler = () => {
+  open.value = (active.value || editable.value) && !open.value
+}
+onMounted(() => {
+  cellClickHook?.on(cellClickHandler)
+})
+onUnmounted(() => {
+  cellClickHook?.on(cellClickHandler)
+})
+
+const clickHandler = () => {
+  if (cellClickHook) {
+    return
+  }
+  cellClickHandler()
+}
 </script>
 
 <template>
@@ -179,7 +205,8 @@ useSelectedCellKeyupListener(active, (e: KeyboardEvent) => {
     :input-read-only="true"
     :dropdown-class-name="`${randomClass} nc-picker-date ${open ? 'active' : ''}`"
     :open="(readOnly || (localState && isPk)) && !active && !editable ? false : open"
-    @click="open = (active || editable) && !open"
+    @click="clickHandler"
+    @update:open="updateOpen"
   >
     <template #suffixIcon></template>
   </a-date-picker>

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

@@ -2,6 +2,7 @@
 import dayjs from 'dayjs'
 import {
   ActiveCellInj,
+  CellClickHookInj,
   ColumnInj,
   ReadonlyInj,
   dateFormats,
@@ -213,6 +214,24 @@ useSelectedCellKeyupListener(active, (e: KeyboardEvent) => {
       break
   }
 })
+
+const cellClickHook = inject(CellClickHookInj, null)
+const cellClickHandler = () => {
+  open.value = (active.value || editable.value) && !open.value
+}
+onMounted(() => {
+  cellClickHook?.on(cellClickHandler)
+})
+onUnmounted(() => {
+  cellClickHook?.on(cellClickHandler)
+})
+
+const clickHandler = () => {
+  if (cellClickHook) {
+    return
+  }
+  cellClickHandler()
+}
 </script>
 
 <template>
@@ -229,7 +248,7 @@ useSelectedCellKeyupListener(active, (e: KeyboardEvent) => {
     :dropdown-class-name="`${randomClass} nc-picker-datetime ${open ? 'active' : ''}`"
     :open="readOnly || (localState && isPk) ? false : open && (active || editable)"
     :disabled="readOnly || (localState && isPk)"
-    @click="open = (active || editable) && !open"
+    @click="clickHandler"
     @ok="open = !open"
   >
     <template #suffixIcon></template>