fix(gui-v2): avoid triggering datepicker on contextmenu

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

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

@@ -1,14 +1,16 @@
 <script setup lang="ts">
 import dayjs from 'dayjs'
+import { vOnClickOutside } from '@vueuse/components'
 import { ColumnInj, ReadonlyInj } from '~/context'
 
-interface Props {
-  modelValue: string | null
-}
 const { modelValue } = defineProps<Props>()
 
 const emit = defineEmits(['update:modelValue'])
 
+interface Props {
+  modelValue: string | null
+}
+
 const columnMeta = inject(ColumnInj, null)
 const readOnlyMode = inject(ReadonlyInj, false)
 
@@ -39,10 +41,23 @@ const localState = $computed({
     }
   },
 })
+const open = ref(false)
+
+const randonClass = `picker_${Math.floor(Math.random() * 99999)}`
+watch(
+  open,
+  (next) => {
+    if (next) {
+      onClickOutside(document.querySelector(`.${randonClass}`)! as HTMLDivElement, () => (open.value = false))
+    }
+  },
+  { flush: 'post' },
+)
 </script>
 
 <template>
   <a-date-picker
+    @click="open = !open"
     v-model:value="localState"
     :bordered="false"
     class="!w-full px-1"
@@ -50,7 +65,8 @@ const localState = $computed({
     :placeholder="isDateInvalid ? 'Invalid date' : !readOnlyMode ? 'Select date' : ''"
     :allow-clear="!readOnlyMode"
     :input-read-only="true"
-    :open="readOnlyMode ? false : undefined"
+    :dropdown-class-name="randonClass"
+    :open="readOnlyMode ? false : open"
   >
     <template #suffixIcon></template>
   </a-date-picker>

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

@@ -41,10 +41,24 @@ const localState = $computed({
     }
   },
 })
+
+const open = ref(false)
+
+const randonClass = `picker_${Math.floor(Math.random() * 99999)}`
+watch(
+  open,
+  (next) => {
+    if (next) {
+      onClickOutside(document.querySelector(`.${randonClass}`)! as HTMLDivElement, () => (open.value = false))
+    }
+  },
+  { flush: 'post' },
+)
 </script>
 
 <template>
   <a-date-picker
+    @click="open = !open"
     v-model:value="localState"
     :show-time="true"
     :bordered="false"
@@ -53,7 +67,8 @@ const localState = $computed({
     :placeholder="isDateInvalid ? 'Invalid date' : !readOnlyMode ? 'Select date and time' : ''"
     :allow-clear="!readOnlyMode"
     :input-read-only="true"
-    :open="readOnlyMode ? false : undefined"
+    :dropdown-class-name="randonClass"
+    :open="readOnlyMode ? false : open"
   >
     <template #suffixIcon></template>
   </a-date-picker>

packages/nc-gui-v2/components/cell/TimePicker.vue

@@ -3,7 +3,7 @@ import dayjs from 'dayjs'
 import { ReadonlyInj } from '~/context'
 
 interface Props {
-  modelValue: string | null
+  modelValue?: string | null
 }
 
 const { modelValue } = defineProps<Props>()
@@ -50,10 +50,26 @@ const localState = $computed({
     }
   },
 })
+
+
+
+const open = ref(false)
+
+const randonClass = `picker_${Math.floor(Math.random() * 99999)}`
+watch(
+  open,
+  (next) => {
+    if (next) {
+      onClickOutside(document.querySelector(`.${randonClass}`)! as HTMLDivElement, () => (open.value = false))
+    }
+  },
+  { flush: 'post' },
+)
 </script>
 
 <template>
   <a-time-picker
+    @click="open = !open"
     v-model:value="localState"
     autofocus
     :show-time="true"
@@ -64,7 +80,8 @@ const localState = $computed({
     :placeholder="isTimeInvalid ? 'Invalid time' : !readOnlyMode ? 'Select time' : ''"
     :allow-clear="!readOnlyMode"
     :input-read-only="true"
-    :open="readOnlyMode ? false : undefined"
+    :open="readOnlyMode ? false : open"
+    :dropdown-class-name="randonClass"
   >
     <template #suffixIcon></template>
   </a-time-picker>