Nc feat/manually feed value for date time related fields (#8015)

* fix(nc-gui): allow manual feed value for date & dateTime field

* fix(nc-gui): add support to manually enter datetime field value

* fix(nc-gui): allow user to type date time field manually

* fix(nc-gui): on type in date time field should open date picker and fill value

* feat(nc-gui): allow user to manually enter date field value

* fix(nc-gui): allow user to manually enter year field value

* feat(nc-gui): allow user to manually feed time field value

* fix(nc-gui): pw test fail issue

* fix(nc-gui): pw test fail issue of time field

* chore(nc-gui): lint

* fix(nc-gui): on type in selected grid cell clear prev value and feed new value

* fix(nc-gui): on press enter date field should focus

* fix(nc-gui): small changes

* fix(nc-gui): year field cell value should be left aligned

* fix(nc-gui): cell padding issue

* fix(nc-gui): Use of escape any number of times should not make selected cell go away in grid view.

* fix(nc-gui): hide clear default value icon in edit column modal

* fix(nc-gui): on enter key press in date time related field it should select next cell field

* fix(nc-gui): date time related field keydown listener issue

* fix(nc-gui): disable manually enter value for date time related field in mobile device

* fix(nc-gui): revert use of escape any number of times should not make selected cell go away

---------

Co-authored-by: Raju Udava <86527202+dstala@users.noreply.github.com>

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

@@ -1,17 +1,15 @@
 <script setup lang="ts">
 import dayjs from 'dayjs'
-import { isDateMonthFormat } from 'nocodb-sdk'
+import { isDateMonthFormat, isSystemColumn } from 'nocodb-sdk'
 import {
   ActiveCellInj,
   CellClickHookInj,
   ColumnInj,
   EditColumnInj,
   EditModeInj,
-  IsSurveyFormInj,
   ReadonlyInj,
   computed,
   inject,
-  isDrawerOrModalExist,
   onClickOutside,
   onMounted,
   onUnmounted,
@@ -19,7 +17,6 @@ import {
   ref,
   useGlobal,
   useI18n,
-  useSelectedCellKeyupListener,
   watch,
 } from '#imports'
 
@@ -34,7 +31,7 @@ const emit = defineEmits(['update:modelValue'])
 
 const { t } = useI18n()
 
-const { showNull } = useGlobal()
+const { showNull, isMobileMode } = useGlobal()
 
 const columnMeta = inject(ColumnInj, null)!
 
@@ -46,19 +43,27 @@ const active = inject(ActiveCellInj, ref(false))
 
 const editable = inject(EditModeInj, ref(false))
 
+const isGrid = inject(IsGridInj, ref(false))
+
 const isForm = inject(IsFormInj, ref(false))
 
-const isSurveyForm = inject(IsSurveyFormInj, ref(false))
+const isExpandedForm = inject(IsExpandedFormOpenInj, ref(false))
 
 const isDateInvalid = ref(false)
 
+const datePickerRef = ref<HTMLInputElement>()
+
 const dateFormat = computed(() => parseProp(columnMeta?.value?.meta)?.date_format ?? 'YYYY-MM-DD')
 
 const picker = computed(() => (isDateMonthFormat(dateFormat.value) ? 'month' : ''))
 
+const isClearedInputMode = ref<boolean>(false)
+
+const open = ref<boolean>(false)
+
 const localState = computed({
   get() {
-    if (!modelValue) {
+    if (!modelValue || isClearedInputMode.value) {
       return undefined
     }
 
@@ -72,6 +77,8 @@ const localState = computed({
     return dayjs(/^\d+$/.test(modelValue) ? +modelValue : modelValue, format)
   },
   set(val?: dayjs.Dayjs) {
+    isClearedInputMode.value = false
+
     if (!val) {
       emit('update:modelValue', null)
       return
@@ -85,25 +92,56 @@ const localState = computed({
     if (val.isValid()) {
       emit('update:modelValue', val?.format('YYYY-MM-DD'))
     }
+
+    open.value = false
   },
 })
-const open = ref<boolean>(false)
 
 const randomClass = `picker_${Math.floor(Math.random() * 99999)}`
+
+onClickOutside(datePickerRef, (e) => {
+  if ((e.target as HTMLElement)?.closest(`.${randomClass}`)) return
+  datePickerRef.value?.blur?.()
+  open.value = false
+})
+
+const onBlur = (e) => {
+  if ((e?.relatedTarget as HTMLElement)?.closest(`.${randomClass}`)) return
+
+  open.value = false
+}
+
 watch(
   open,
   (next) => {
     if (next) {
-      onClickOutside(document.querySelector(`.${randomClass}`)! as HTMLDivElement, () => (open.value = false))
+      editable.value = true
+      datePickerRef.value?.focus?.()
+
+      onClickOutside(document.querySelector(`.${randomClass}`)! as HTMLDivElement, (e) => {
+        if ((e?.target as HTMLElement)?.closest(`.nc-${randomClass}`)) {
+          return
+        }
+        open.value = false
+      })
     } else {
-      editable.value = false
+      isClearedInputMode.value = false
     }
   },
   { flush: 'post' },
 )
 
+watch(editable, (nextValue) => {
+  if (isGrid.value && nextValue && !open.value) {
+    open.value = true
+  }
+})
+
 const placeholder = computed(() => {
-  if (isForm.value && !isDateInvalid.value) {
+  if (
+    ((isForm.value || isExpandedForm.value) && !isDateInvalid.value) ||
+    (isGrid.value && !showNull.value && !isDateInvalid.value && !isSystemColumn(columnMeta.value) && active.value)
+  ) {
     return dateFormat.value
   } else if (isEditColumn.value && (modelValue === '' || modelValue === null)) {
     return t('labels.optional')
@@ -116,113 +154,18 @@ const placeholder = computed(() => {
   }
 })
 
-useSelectedCellKeyupListener(active, (e: KeyboardEvent) => {
-  switch (e.key) {
-    case 'Enter':
-      e.stopPropagation()
-      // skip if drawer / modal is active
-      if (isDrawerOrModalExist()) {
-        return
-      }
-      if (!open.value) {
-        // open date picker
-        open.value = true
-      } else {
-        // select the current day
-        const el = document.querySelector('.nc-picker-date.active .ant-picker-cell-selected') as HTMLButtonElement
-        if (el) {
-          el.click()
-          open.value = false
-        }
-      }
-      break
-    case 'Escape':
-      // skip if drawer / modal is active
-      if (isDrawerOrModalExist()) {
-        return
-      }
-      if (open.value) {
-        e.stopPropagation()
-        open.value = false
-      }
-      break
-    case 'ArrowLeft':
-      if (!localState.value) {
-        ;(document.querySelector('.nc-picker-date.active .ant-picker-header-prev-btn') as HTMLButtonElement)?.click()
-      } else {
-        const prevEl = document.querySelector('.nc-picker-date.active .ant-picker-cell-selected')
-          ?.previousElementSibling as HTMLButtonElement
-        if (prevEl) {
-          prevEl.click()
-        } else {
-          // get the last td from previous tr
-          const prevRowLastEl = document
-            .querySelector('.nc-picker-date.active .ant-picker-cell-selected')
-            ?.closest('tr')
-            ?.previousElementSibling?.querySelector('td:last-child') as HTMLButtonElement
-          if (prevRowLastEl) {
-            prevRowLastEl.click()
-          } else {
-            // go to the previous month
-            ;(document.querySelector('.nc-picker-date.active .ant-picker-header-prev-btn') as HTMLButtonElement)?.click()
-          }
-        }
-      }
-      break
-    case 'ArrowRight':
-      if (!localState.value) {
-        ;(document.querySelector('.nc-picker-date.active .ant-picker-header-next-btn') as HTMLButtonElement)?.click()
-      } else {
-        const nextEl = document.querySelector('.nc-picker-date.active .ant-picker-cell-selected')
-          ?.nextElementSibling as HTMLButtonElement
-        if (nextEl) {
-          nextEl.click()
-        } else {
-          // get the last td from previous tr
-          const nextRowFirstEl = document
-            .querySelector('.nc-picker-date.active .ant-picker-cell-selected')
-            ?.closest('tr')
-            ?.nextElementSibling?.querySelector('td:first-child') as HTMLButtonElement
-          if (nextRowFirstEl) {
-            nextRowFirstEl.click()
-          } else {
-            // go to the next month
-            ;(document.querySelector('.nc-picker-date.active .ant-picker-header-next-btn') as HTMLButtonElement)?.click()
-          }
-        }
-      }
-      break
-    case 'ArrowUp':
-      if (!localState.value)
-        (document.querySelector('.nc-picker-date.active .ant-picker-header-super-prev-btn') as HTMLButtonElement)?.click()
-      break
-    case 'ArrowDown':
-      if (!localState.value)
-        (document.querySelector('.nc-picker-date.active .ant-picker-header-super-next-btn') as HTMLButtonElement)?.click()
-      break
-    case ';':
-      localState.value = dayjs(new Date())
-      break
-  }
-})
-
 const isOpen = computed(() => {
   if (readOnly.value) return false
 
   return (readOnly.value || (localState.value && isPk)) && !active.value && !editable.value ? false : open.value
 })
 
-// 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
+  if (readOnly.value || open.value) return
+
+  open.value = active.value || editable.value
 }
 
 onMounted(() => {
@@ -241,43 +184,88 @@ const clickHandler = () => {
 }
 
 const handleKeydown = (e: KeyboardEvent) => {
+  if (e.key !== 'Enter') {
+    e.stopPropagation()
+  }
+
   switch (e.key) {
-    case ' ':
-      if (isSurveyForm.value) {
-        open.value = !open.value
+    case 'Enter':
+      open.value = !open.value
+      if (!open.value) {
+        editable.value = false
+        if (isGrid.value && !isExpandedForm.value && !isEditColumn.value) {
+          datePickerRef.value?.blur?.()
+        }
       }
-      break
+      return
+    case 'Escape':
+      if (open.value) {
+        open.value = false
+        editable.value = false
+        if (isGrid.value && !isExpandedForm.value && !isEditColumn.value) {
+          datePickerRef.value?.blur?.()
+        }
+      } else {
+        editable.value = false
 
-    case 'Enter':
-      if (!isSurveyForm.value) {
-        open.value = !open.value
+        datePickerRef.value?.blur?.()
+      }
+
+      return
+    default:
+      if (!open.value && /^[0-9a-z]$/i.test(e.key)) {
+        open.value = true
       }
-      break
   }
 }
+
+useEventListener(document, 'keydown', (e: KeyboardEvent) => {
+  // To prevent event listener on non active cell
+  if (!active.value) return
+
+  if (e.altKey || e.ctrlKey || e.shiftKey || e.metaKey || !isGrid.value || isExpandedForm.value || isEditColumn.value) return
+
+  switch (e.key) {
+    case ';':
+      localState.value = dayjs(new Date())
+      e.preventDefault()
+      break
+    default:
+      if (!isOpen.value && datePickerRef.value && /^[0-9a-z]$/i.test(e.key)) {
+        isClearedInputMode.value = true
+        datePickerRef.value.focus()
+        editable.value = true
+        open.value = true
+      }
+  }
+})
 </script>
 
 <template>
   <a-date-picker
+    ref="datePickerRef"
     v-model:value="localState"
     :disabled="readOnly"
     :picker="picker"
     :tabindex="0"
     :bordered="false"
     class="nc-cell-field !w-full !py-1 !border-none !text-current"
-    :class="{ 'nc-null': modelValue === null && showNull }"
+    :class="[`nc-${randomClass}`, { 'nc-null': modelValue === null && showNull }]"
     :format="dateFormat"
     :placeholder="placeholder"
-    :allow-clear="!readOnly && !localState && !isPk"
-    :input-read-only="true"
+    :allow-clear="!readOnly && !isEditColumn"
+    :input-read-only="!!isMobileMode"
     :dropdown-class-name="`${randomClass} nc-picker-date  children:border-1 children:border-gray-200  ${open ? 'active' : ''} `"
     :open="isOpen"
+    @blur="onBlur"
     @click="clickHandler"
-    @update:open="updateOpen"
     @keydown="handleKeydown"
+    @mouseup.stop
+    @mousedown.stop
   >
     <template #suffixIcon></template>
   </a-date-picker>
+  <div v-if="!editable && isGrid" class="absolute inset-0 z-90 cursor-pointer"></div>
 </template>
 
 <style scoped>

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

@@ -7,14 +7,11 @@ import {
   ColumnInj,
   EditColumnInj,
   IsFormInj,
-  IsSurveyFormInj,
   ReadonlyInj,
   inject,
-  isDrawerOrModalExist,
   parseProp,
   ref,
   useBase,
-  useSelectedCellKeyupListener,
   watch,
 } from '#imports'
 
@@ -29,7 +26,7 @@ const emit = defineEmits(['update:modelValue'])
 
 const { isMssql, isXcdbBase } = useBase()
 
-const { showNull } = useGlobal()
+const { showNull, isMobileMode } = useGlobal()
 
 const readOnly = inject(ReadonlyInj, ref(false))
 
@@ -37,18 +34,22 @@ const active = inject(ActiveCellInj, ref(false))
 
 const editable = inject(EditModeInj, ref(false))
 
-const isForm = inject(IsFormInj, ref(false))
+const isGrid = inject(IsGridInj, ref(false))
 
-const isSurveyForm = inject(IsSurveyFormInj, ref(false))
+const isForm = inject(IsFormInj, ref(false))
 
 const { t } = useI18n()
 
 const isEditColumn = inject(EditColumnInj, ref(false))
 
+const isExpandedForm = inject(IsExpandedFormOpenInj, ref(false))
+
 const column = inject(ColumnInj)!
 
 const isDateInvalid = ref(false)
 
+const datePickerRef = ref<HTMLInputElement>()
+
 const dateTimeFormat = computed(() => {
   const dateFormat = parseProp(column?.value?.meta)?.date_format ?? dateFormats[0]
   const timeFormat = parseProp(column?.value?.meta)?.time_format ?? timeFormats[0]
@@ -57,14 +58,13 @@ const dateTimeFormat = computed(() => {
 
 let localModelValue = modelValue ? dayjs(modelValue).utc().local() : undefined
 
-const tempLocalValue = ref<dayjs.Dayjs>()
+const isClearedInputMode = ref<boolean>(false)
+
+const open = ref(false)
 
 const localState = computed({
   get() {
-    if (!modelValue && tempLocalValue.value) {
-      return tempLocalValue.value
-    }
-    if (!modelValue) {
+    if (!modelValue || isClearedInputMode.value) {
       return undefined
     }
 
@@ -114,8 +114,10 @@ const localState = computed({
     return dayjs(modelValue).utc().local()
   },
   set(val?: dayjs.Dayjs) {
+    isClearedInputMode.value = false
     if (!val) {
       emit('update:modelValue', null)
+
       return
     }
 
@@ -128,8 +130,6 @@ const localState = computed({
   },
 })
 
-const open = ref(false)
-
 const isOpen = computed(() => {
   if (readOnly.value) return false
 
@@ -137,27 +137,44 @@ const isOpen = computed(() => {
 })
 
 const randomClass = `picker_${Math.floor(Math.random() * 99999)}`
+
+onClickOutside(datePickerRef, (e) => {
+  if ((e.target as HTMLElement)?.closest(`.${randomClass}`)) return
+  datePickerRef.value?.blur?.()
+  open.value = false
+})
+
+const onBlur = (e) => {
+  if ((e?.relatedTarget as HTMLElement)?.closest(`.${randomClass}`)) return
+
+  open.value = false
+}
+
 watch(
   open,
   (next) => {
     if (next) {
-      onClickOutside(document.querySelector(`.${randomClass}`)! as HTMLDivElement, () => (open.value = false))
+      editable.value = true
+      datePickerRef.value?.focus?.()
 
-      if (!modelValue) {
-        tempLocalValue.value = dayjs(new Date()).utc().local()
-      } else {
-        tempLocalValue.value = undefined
-      }
+      onClickOutside(document.querySelector(`.${randomClass}`)! as HTMLDivElement, (e) => {
+        if ((e?.target as HTMLElement)?.closest(`.nc-${randomClass}`)) {
+          return
+        }
+        open.value = false
+      })
     } else {
-      editable.value = false
-      tempLocalValue.value = undefined
+      isClearedInputMode.value = false
     }
   },
   { flush: 'post' },
 )
 
 const placeholder = computed(() => {
-  if (isForm.value && !isDateInvalid.value) {
+  if (
+    ((isForm.value || isExpandedForm.value) && !isDateInvalid.value) ||
+    (isGrid.value && !showNull.value && !isDateInvalid.value && !isSystemColumn(column.value) && active.value)
+  ) {
     return dateTimeFormat.value
   } else if (isEditColumn.value && (modelValue === '' || modelValue === null)) {
     return t('labels.optional')
@@ -170,105 +187,18 @@ const placeholder = computed(() => {
   }
 })
 
-useSelectedCellKeyupListener(active, (e: KeyboardEvent) => {
-  switch (e.key) {
-    case 'Enter':
-      e.stopPropagation()
-      // skip if drawer / modal is active
-      if (isDrawerOrModalExist()) {
-        return
-      }
-      if (!open.value) {
-        // open date picker
-        open.value = true
-      } else {
-        // click Ok button to save the currently selected date
-        ;(document.querySelector('.nc-picker-datetime.active .ant-picker-ok button') as HTMLButtonElement)?.click()
-      }
-      break
-    case 'Escape':
-      // skip if drawer / modal is active
-      if (isDrawerOrModalExist()) {
-        return
-      }
-      if (open.value) {
-        e.stopPropagation()
-        open.value = false
-      }
-      break
-    case 'ArrowLeft':
-      if (!localState.value) {
-        ;(document.querySelector('.nc-picker-datetime.active .ant-picker-header-prev-btn') as HTMLButtonElement)?.click()
-      } else {
-        const prevEl = document.querySelector('.nc-picker-datetime.active .ant-picker-cell-selected')
-          ?.previousElementSibling as HTMLButtonElement
-        if (prevEl) {
-          prevEl.click()
-        } else {
-          // get the last td from previous tr
-          const prevRowLastEl = document
-            .querySelector('.nc-picker-datetime.active .ant-picker-cell-selected')
-            ?.closest('tr')
-            ?.previousElementSibling?.querySelector('td:last-child') as HTMLButtonElement
-          if (prevRowLastEl) {
-            prevRowLastEl.click()
-          } else {
-            // go to the previous month
-            ;(document.querySelector('.nc-picker-datetime.active .ant-picker-header-prev-btn') as HTMLButtonElement)?.click()
-          }
-        }
-      }
-      break
-    case 'ArrowRight':
-      if (!localState.value) {
-        ;(document.querySelector('.nc-picker-datetime.active .ant-picker-header-next-btn') as HTMLButtonElement)?.click()
-      } else {
-        const nextEl = document.querySelector('.nc-picker-datetime.active .ant-picker-cell-selected')
-          ?.nextElementSibling as HTMLButtonElement
-        if (nextEl) {
-          nextEl.click()
-        } else {
-          // get the last td from previous tr
-          const nextRowFirstEl = document
-            .querySelector('.nc-picker-datetime.active .ant-picker-cell-selected')
-            ?.closest('tr')
-            ?.nextElementSibling?.querySelector('td:first-child') as HTMLButtonElement
-          if (nextRowFirstEl) {
-            nextRowFirstEl.click()
-          } else {
-            // go to the next month
-            ;(document.querySelector('.nc-picker-datetime.active .ant-picker-header-next-btn') as HTMLButtonElement)?.click()
-          }
-        }
-      }
-      break
-    case 'ArrowUp':
-      if (!localState.value)
-        (document.querySelector('.nc-picker-datetime.active .ant-picker-header-super-prev-btn') as HTMLButtonElement)?.click()
-      break
-    case 'ArrowDown':
-      if (!localState.value)
-        (document.querySelector('.nc-picker-datetime.active .ant-picker-header-super-next-btn') as HTMLButtonElement)?.click()
-      break
-    case ';':
-      localState.value = dayjs(new Date())
-      break
-  }
-})
-
 const cellClickHook = inject(CellClickHookInj, null)
 const cellClickHandler = () => {
-  if (readOnly.value) return
-  open.value = (active.value || editable.value) && !open.value
+  if (readOnly.value || open.value) return
+  open.value = active.value || editable.value
 }
 
 function okHandler(val: dayjs.Dayjs | string) {
+  isClearedInputMode.value = false
+
   if (!val) {
     emit('update:modelValue', null)
-    return
-  }
-
-  if (dayjs(val).isValid()) {
+  } else if (dayjs(val).isValid()) {
     // setting localModelValue to cater NOW function in date picker
     localModelValue = dayjs(val)
     // send the payload in UTC format
@@ -276,7 +206,12 @@ function okHandler(val: dayjs.Dayjs | string) {
   }
 
   open.value = !open.value
+  if (!open.value && isGrid.value && !isExpandedForm.value && !isEditColumn.value) {
+    datePickerRef.value?.blur?.()
+    editable.value = false
+  }
 }
+
 onMounted(() => {
   cellClickHook?.on(cellClickHandler)
 })
@@ -284,7 +219,14 @@ onUnmounted(() => {
   cellClickHook?.on(cellClickHandler)
 })
 
-const clickHandler = () => {
+const clickHandler = (e) => {
+  if ((e.target as HTMLElement).closest(`.nc-${randomClass} .ant-picker-clear`)) {
+    e.stopPropagation()
+    emit('update:modelValue', null)
+    open.value = false
+    return
+  }
+
   if (cellClickHook) {
     return
   }
@@ -296,42 +238,99 @@ const isColDisabled = computed(() => {
 })
 
 const handleKeydown = (e: KeyboardEvent) => {
+  if (e.key !== 'Enter') {
+    e.stopPropagation()
+  }
+
   switch (e.key) {
-    case ' ':
-      if (isSurveyForm.value) {
-        open.value = !open.value
+    case 'Enter':
+      if (isOpen.value) {
+        return okHandler((e.target as HTMLInputElement).value)
+      } else {
+        open.value = true
       }
-      break
+      return
+    case 'Escape':
+      if (open.value) {
+        open.value = false
+        editable.value = false
+        if (isGrid.value && !isExpandedForm.value && !isEditColumn.value) {
+          datePickerRef.value?.blur?.()
+        }
+      } else {
+        editable.value = false
 
-    case 'Enter':
-      if (!isSurveyForm.value) {
-        open.value = !open.value
+        datePickerRef.value?.blur?.()
+      }
+
+      return
+    case 'Tab':
+      open.value = false
+      if (isGrid.value) {
+        editable.value = false
+        datePickerRef.value?.blur()
+      }
+      return
+    default:
+      if (!open.value && /^[0-9a-z]$/i.test(e.key)) {
+        open.value = true
       }
-      break
   }
 }
+
+useEventListener(document, 'keydown', (e: KeyboardEvent) => {
+  // To prevent event listener on non active cell
+  if (!active.value) return
+
+  if (e.altKey || e.ctrlKey || e.shiftKey || e.metaKey || !isGrid.value || isExpandedForm.value || isEditColumn.value) return
+
+  switch (e.key) {
+    case ';':
+      localState.value = dayjs(new Date())
+      e.preventDefault()
+      break
+    default:
+      if (!isOpen.value && datePickerRef.value && /^[0-9a-z]$/i.test(e.key)) {
+        isClearedInputMode.value = true
+        datePickerRef.value.focus()
+        editable.value = true
+        open.value = true
+      }
+  }
+})
+
+watch(editable, (nextValue) => {
+  if (isGrid.value && nextValue && !open.value) {
+    open.value = true
+  }
+})
 </script>
 
 <template>
   <a-date-picker
+    ref="datePickerRef"
     :value="localState"
     :disabled="isColDisabled"
     :show-time="true"
     :bordered="false"
-    class="nc-cell-field !w-full !py-1 !border-none !text-current"
-    :class="{ 'nc-null': modelValue === null && showNull }"
+    class="nc-cell-field nc-cell-picker-datetime !w-full !py-1 !border-none !text-current"
+    :class="[`nc-${randomClass}`, { 'nc-null': modelValue === null && showNull }]"
     :format="dateTimeFormat"
     :placeholder="placeholder"
-    :allow-clear="!readOnly && !localState && !isPk"
-    :input-read-only="true"
+    :allow-clear="!isColDisabled && !isEditColumn"
+    :input-read-only="!!isMobileMode"
     :dropdown-class-name="`${randomClass} nc-picker-datetime children:border-1 children:border-gray-200 ${open ? 'active' : ''}`"
     :open="isOpen"
+    @blur="onBlur"
     @click="clickHandler"
     @ok="okHandler"
     @keydown="handleKeydown"
+    @mouseup.stop
+    @mousedown.stop
   >
     <template #suffixIcon></template>
   </a-date-picker>
+  <div v-if="!editable && isGrid" class="absolute inset-0 z-90 cursor-pointer"></div>
 </template>
 
 <style scoped>

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

@@ -1,17 +1,7 @@
 <script setup lang="ts">
 import dayjs from 'dayjs'
-import {
-  ActiveCellInj,
-  EditColumnInj,
-  IsFormInj,
-  IsSurveyFormInj,
-  ReadonlyInj,
-  inject,
-  onClickOutside,
-  useBase,
-  useSelectedCellKeyupListener,
-  watch,
-} from '#imports'
+import { isSystemColumn } from 'nocodb-sdk'
+import { ActiveCellInj, EditColumnInj, IsFormInj, ReadonlyInj, inject, onClickOutside, useBase, watch } from '#imports'
 
 interface Props {
   modelValue?: string | null | undefined
@@ -24,7 +14,7 @@ const emit = defineEmits(['update:modelValue'])
 
 const { isMysql } = useBase()
 
-const { showNull } = useGlobal()
+const { showNull, isMobileMode } = useGlobal()
 
 const readOnly = inject(ReadonlyInj, ref(false))
 
@@ -34,21 +24,29 @@ const editable = inject(EditModeInj, ref(false))
 
 const isEditColumn = inject(EditColumnInj, ref(false))
 
+const isGrid = inject(IsGridInj, ref(false))
+
 const isForm = inject(IsFormInj, ref(false))
 
-const isSurveyForm = inject(IsSurveyFormInj, ref(false))
+const isExpandedForm = inject(IsExpandedFormOpenInj, ref(false))
 
 const column = inject(ColumnInj)!
 
+const dateFormat = isMysql(column.value.source_id) ? 'YYYY-MM-DD HH:mm:ss' : 'YYYY-MM-DD HH:mm:ssZ'
+
 const isTimeInvalid = ref(false)
 
-const dateFormat = isMysql(column.value.source_id) ? 'YYYY-MM-DD HH:mm:ss' : 'YYYY-MM-DD HH:mm:ssZ'
+const datePickerRef = ref<HTMLInputElement>()
+
+const isClearedInputMode = ref<boolean>(false)
 
 const { t } = useI18n()
 
+const open = ref(false)
+
 const localState = computed({
   get() {
-    if (!modelValue) {
+    if (!modelValue || isClearedInputMode.value) {
       return undefined
     }
     let dateTime = dayjs(modelValue)
@@ -67,6 +65,7 @@ const localState = computed({
     return dateTime
   },
   set(val?: dayjs.Dayjs) {
+    isClearedInputMode.value = false
     if (!val) {
       emit('update:modelValue', null)
       return
@@ -80,23 +79,51 @@ const localState = computed({
   },
 })
 
-const open = ref(false)
-
 const randomClass = `picker_${Math.floor(Math.random() * 99999)}`
+
+onClickOutside(datePickerRef, (e) => {
+  if ((e.target as HTMLElement)?.closest(`.${randomClass}`)) return
+  datePickerRef.value?.blur?.()
+  open.value = false
+})
+
+const onBlur = (e) => {
+  if ((e?.relatedTarget as HTMLElement)?.closest(`.${randomClass}`)) return
+
+  open.value = false
+}
+
 watch(
   open,
   (next) => {
     if (next) {
-      onClickOutside(document.querySelector(`.${randomClass}`)! as HTMLDivElement, () => (open.value = false))
+      editable.value = true
+      datePickerRef.value?.focus?.()
+
+      onClickOutside(document.querySelector(`.${randomClass}`)! as HTMLDivElement, (e) => {
+        if ((e?.target as HTMLElement)?.closest(`.nc-${randomClass}`)) {
+          return
+        }
+        open.value = false
+      })
     } else {
-      editable.value = false
+      isClearedInputMode.value = false
     }
   },
   { flush: 'post' },
 )
 
+watch(editable, (nextValue) => {
+  if (isGrid.value && nextValue && !open.value) {
+    open.value = true
+  }
+})
+
 const placeholder = computed(() => {
-  if (isForm.value && !isTimeInvalid.value) {
+  if (
+    ((isForm.value || isExpandedForm.value) && !isTimeInvalid.value) ||
+    (isGrid.value && !showNull.value && !isTimeInvalid.value && !isSystemColumn(column.value) && active.value)
+  ) {
     return 'HH:mm'
   } else if (isEditColumn.value && (modelValue === '' || modelValue === null)) {
     return t('labels.optional')
@@ -115,40 +142,71 @@ const isOpen = computed(() => {
   return (readOnly.value || (localState.value && isPk)) && !active.value && !editable.value ? false : open.value
 })
 
-const handleKeydown = (e: KeyboardEvent) => {
-  switch (e.key) {
-    case ' ':
-      if (isSurveyForm.value) {
-        open.value = !open.value
-      }
-      break
+const clickHandler = () => {
+  if (readOnly.value || open.value) return
+  open.value = active.value || editable.value
+}
 
-    case 'Enter':
-      if (!isSurveyForm.value) {
-        open.value = !open.value
-      }
-      break
+const handleKeydown = (e: KeyboardEvent) => {
+  if (e.key !== 'Enter') {
+    e.stopPropagation()
   }
-}
 
-useSelectedCellKeyupListener(active, (e: KeyboardEvent) => {
   switch (e.key) {
     case 'Enter':
-      e.stopPropagation()
-      open.value = true
-      break
+      open.value = !open.value
+      if (!open.value) {
+        editable.value = false
+        if (isGrid.value && !isExpandedForm.value && !isEditColumn.value) {
+          datePickerRef.value?.blur?.()
+        }
+      }
+      return
     case 'Escape':
       if (open.value) {
-        e.stopPropagation()
         open.value = false
+        editable.value = false
+        if (isGrid.value && !isExpandedForm.value && !isEditColumn.value) {
+          datePickerRef.value?.blur?.()
+        }
+      } else {
+        editable.value = false
+
+        datePickerRef.value?.blur?.()
+      }
+      return
+    default:
+      if (!open.value && /^[0-9a-z]$/i.test(e.key)) {
+        open.value = true
       }
+  }
+}
+
+useEventListener(document, 'keydown', (e: KeyboardEvent) => {
+  // To prevent event listener on non active cell
+  if (!active.value) return
+
+  if (e.altKey || e.ctrlKey || e.shiftKey || e.metaKey || !isGrid.value || isExpandedForm.value || isEditColumn.value) return
+
+  switch (e.key) {
+    case ';':
+      localState.value = dayjs(new Date())
+      e.preventDefault()
       break
+    default:
+      if (!isOpen.value && datePickerRef.value && /^[0-9a-z]$/i.test(e.key)) {
+        isClearedInputMode.value = true
+        datePickerRef.value.focus()
+        editable.value = true
+        open.value = true
+      }
   }
 })
 </script>
 
 <template>
   <a-time-picker
+    ref="datePickerRef"
     v-model:value="localState"
     :tabindex="0"
     :disabled="readOnly"
@@ -157,18 +215,22 @@ useSelectedCellKeyupListener(active, (e: KeyboardEvent) => {
     use12-hours
     format="HH:mm"
     class="nc-cell-field !w-full !py-1 !border-none !text-current"
-    :class="{ 'nc-null': modelValue === null && showNull }"
+    :class="[`nc-${randomClass}`, { 'nc-null': modelValue === null && showNull }]"
     :placeholder="placeholder"
-    :allow-clear="!readOnly && !localState && !isPk"
-    :input-read-only="true"
+    :allow-clear="!readOnly && !isPk && !isEditColumn"
+    :input-read-only="!!isMobileMode"
     :open="isOpen"
     :popup-class-name="`${randomClass} nc-picker-time children:border-1 children:border-gray-200 ${open ? 'active' : ''}`"
+    @blur="onBlur"
     @keydown="handleKeydown"
-    @click="open = (active || editable) && !open"
+    @click="clickHandler"
     @ok="open = !open"
+    @mouseup.stop
+    @mousedown.stop
   >
     <template #suffixIcon></template>
   </a-time-picker>
+  <div v-if="!editable && isGrid" class="absolute inset-0 z-90 cursor-pointer"></div>
 </template>
 
 <style scoped>

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

@@ -1,18 +1,7 @@
 <script setup lang="ts">
 import dayjs from 'dayjs'
-import {
-  ActiveCellInj,
-  EditColumnInj,
-  IsFormInj,
-  IsSurveyFormInj,
-  ReadonlyInj,
-  computed,
-  inject,
-  onClickOutside,
-  ref,
-  useSelectedCellKeyupListener,
-  watch,
-} from '#imports'
+import { isSystemColumn } from 'nocodb-sdk'
+import { ActiveCellInj, EditColumnInj, IsFormInj, ReadonlyInj, computed, inject, onClickOutside, ref, watch } from '#imports'
 
 interface Props {
   modelValue?: number | string | null
@@ -23,7 +12,9 @@ const { modelValue, isPk = false } = defineProps<Props>()
 
 const emit = defineEmits(['update:modelValue'])
 
-const { showNull } = useGlobal()
+const { showNull, isMobileMode } = useGlobal()
+
+const column = inject(ColumnInj, null)!
 
 const readOnly = inject(ReadonlyInj, ref(false))
 
@@ -33,17 +24,25 @@ const editable = inject(EditModeInj, ref(false))
 
 const isEditColumn = inject(EditColumnInj, ref(false))
 
+const isGrid = inject(IsGridInj, ref(false))
+
 const isForm = inject(IsFormInj, ref(false))
 
-const isSurveyForm = inject(IsSurveyFormInj, ref(false))
+const isExpandedForm = inject(IsExpandedFormOpenInj, ref(false))
 
 const isYearInvalid = ref(false)
 
+const datePickerRef = ref<HTMLInputElement>()
+
+const isClearedInputMode = ref<boolean>(false)
+
 const { t } = useI18n()
 
+const open = ref<boolean>(false)
+
 const localState = computed({
   get() {
-    if (!modelValue) {
+    if (!modelValue || isClearedInputMode.value) {
       return undefined
     }
 
@@ -56,6 +55,8 @@ const localState = computed({
     return yearDate
   },
   set(val?: dayjs.Dayjs) {
+    isClearedInputMode.value = false
+
     if (!val) {
       emit('update:modelValue', null)
       return
@@ -64,26 +65,56 @@ const localState = computed({
     if (val?.isValid()) {
       emit('update:modelValue', val.format('YYYY'))
     }
+
+    open.value = false
   },
 })
 
-const open = ref<boolean>(false)
-
 const randomClass = `picker_${Math.floor(Math.random() * 99999)}`
+
+onClickOutside(datePickerRef, (e) => {
+  if ((e.target as HTMLElement)?.closest(`.${randomClass}`)) return
+  datePickerRef.value?.blur?.()
+  open.value = false
+})
+
+const onBlur = (e) => {
+  if ((e?.relatedTarget as HTMLElement)?.closest(`.${randomClass}`)) return
+
+  open.value = false
+}
+
 watch(
   open,
   (next) => {
     if (next) {
-      onClickOutside(document.querySelector(`.${randomClass}`)! as HTMLDivElement, () => (open.value = false))
+      editable.value = true
+      datePickerRef.value?.focus?.()
+
+      onClickOutside(document.querySelector(`.${randomClass}`)! as HTMLDivElement, (e) => {
+        if ((e?.target as HTMLElement)?.closest(`.nc-${randomClass}`)) {
+          return
+        }
+        open.value = false
+      })
     } else {
-      editable.value = false
+      isClearedInputMode.value = false
     }
   },
   { flush: 'post' },
 )
 
+watch(editable, (nextValue) => {
+  if (isGrid.value && nextValue && !open.value) {
+    open.value = true
+  }
+})
+
 const placeholder = computed(() => {
-  if (isForm.value && !isYearInvalid.value) {
+  if (
+    ((isForm.value || isExpandedForm.value) && !isYearInvalid.value) ||
+    (isGrid.value && !showNull.value && !isYearInvalid.value && !isSystemColumn(column.value) && active.value)
+  ) {
     return 'YYYY'
   } else if (isEditColumn.value && (modelValue === '' || modelValue === null)) {
     return t('labels.optional')
@@ -98,62 +129,96 @@ const placeholder = computed(() => {
 
 const isOpen = computed(() => {
   if (readOnly.value) return false
-
   return (readOnly.value || (localState.value && isPk)) && !active.value && !editable.value ? false : open.value
 })
 
+const clickHandler = () => {
+  if (readOnly.value || open.value) return
+  open.value = active.value || editable.value
+}
+
 const handleKeydown = (e: KeyboardEvent) => {
+  if (e.key !== 'Enter') {
+    e.stopPropagation()
+  }
+
   switch (e.key) {
-    case ' ':
-      if (isSurveyForm.value) {
-        open.value = !open.value
+    case 'Enter':
+      open.value = !open.value
+      if (!open.value) {
+        editable.value = false
+        if (isGrid.value && !isExpandedForm.value && !isEditColumn.value) {
+          datePickerRef.value?.blur?.()
+        }
       }
-      break
 
-    case 'Enter':
-      if (!isSurveyForm.value) {
-        open.value = !open.value
+      return
+    case 'Escape':
+      if (open.value) {
+        open.value = false
+        editable.value = false
+        if (isGrid.value && !isExpandedForm.value && !isEditColumn.value) {
+          datePickerRef.value?.blur?.()
+        }
+      } else {
+        editable.value = false
+
+        datePickerRef.value?.blur?.()
+      }
+      return
+    default:
+      if (!open.value && /^[0-9a-z]$/i.test(e.key)) {
+        open.value = true
       }
-      break
   }
 }
 
-useSelectedCellKeyupListener(active, (e: KeyboardEvent) => {
+useEventListener(document, 'keydown', (e: KeyboardEvent) => {
+  // To prevent event listener on non active cell
+  if (!active.value) return
+
+  if (e.altKey || e.ctrlKey || e.shiftKey || e.metaKey || !isGrid.value || isExpandedForm.value || isEditColumn.value) return
+
   switch (e.key) {
-    case 'Enter':
-      e.stopPropagation()
-      open.value = true
+    case ';':
+      localState.value = dayjs(new Date())
+      e.preventDefault()
       break
-    case 'Escape':
-      if (open.value) {
-        e.stopPropagation()
-        open.value = false
+    default:
+      if (!isOpen.value && datePickerRef.value && /^[0-9a-z]$/i.test(e.key)) {
+        isClearedInputMode.value = true
+        datePickerRef.value.focus()
+        editable.value = true
+        open.value = true
       }
-      break
   }
 })
 </script>
 
 <template>
   <a-date-picker
+    ref="datePickerRef"
     v-model:value="localState"
+    :disabled="readOnly"
     :tabindex="0"
     picker="year"
     :bordered="false"
     class="nc-cell-field !w-full !py-1 !border-none !text-current"
-    :class="{ 'nc-null': modelValue === null && showNull }"
+    :class="[`nc-${randomClass}`, { 'nc-null': modelValue === null && showNull }]"
     :placeholder="placeholder"
-    :allow-clear="(!readOnly && !localState && !isPk) || isEditColumn"
-    :input-read-only="true"
+    :allow-clear="!readOnly && !isPk"
+    :input-read-only="!!isMobileMode"
     :open="isOpen"
     :dropdown-class-name="`${randomClass} nc-picker-year children:border-1 children:border-gray-200 ${open ? 'active' : ''}`"
+    @blur="onBlur"
     @keydown="handleKeydown"
-    @click="open = (active || editable) && !open"
-    @change="open = (active || editable) && !open"
-    @ok="open = !open"
+    @click="clickHandler"
+    @mouseup.stop
+    @mousedown.stop
   >
     <template #suffixIcon></template>
   </a-date-picker>
+  <div v-if="!editable && isGrid" class="absolute inset-0 z-90 cursor-pointer"></div>
 </template>
 
 <style scoped>

packages/nc-gui/components/smartsheet/Cell.vue

@@ -196,7 +196,13 @@ onUnmounted(() => {
       {
         'text-brand-500': isPrimary(column) && !props.virtual && !isForm && !isCalendar,
         'nc-grid-numeric-cell-right':
-          isGrid && isNumericField && !isEditColumnMenu && !isForm && !isExpandedFormOpen && !isRating(column),
+          isGrid &&
+          isNumericField &&
+          !isEditColumnMenu &&
+          !isForm &&
+          !isExpandedFormOpen &&
+          !isRating(column) &&
+          !isYear(column, abstractType),
         'h-10': !isEditColumnMenu && isForm && !isAttachment(column) && !isTextArea(column) && !isJSON(column) && !props.virtual,
         'nc-grid-numeric-cell-left': (isForm && isNumericField && isExpandedFormOpen) || isEditColumnMenu,
         '!min-h-30': isTextArea(column) && (isForm || isSurveyForm),
@@ -271,7 +277,9 @@ onUnmounted(() => {
   }
 }
 
-.nc-cell .nc-cell-field {
-  @apply px-0;
+.nc-cell {
+  :deep(.nc-cell-field) {
+    @apply px-0;
+  }
 }
 </style>

packages/nc-gui/components/smartsheet/grid/Table.vue

@@ -585,7 +585,7 @@ const {
     // ignore navigating if picker(Date, Time, DateTime, Year)
     // or single/multi select options is open
     const activePickerOrDropdownEl = document.querySelector(
-      '.nc-picker-datetime.active,.nc-dropdown-single-select-cell.active,.nc-dropdown-multi-select-cell.active,.nc-picker-date.active,.nc-picker-year.active,.nc-picker-time.active',
+      '.nc-dropdown-single-select-cell.active,.nc-dropdown-multi-select-cell.active',
     )
     if (activePickerOrDropdownEl) {
       e.preventDefault()

tests/playwright/pages/Dashboard/common/Cell/TimeCell.ts

@@ -48,7 +48,7 @@ export class TimeCellPageObject extends BasePage {
   async set({ index, columnHeader, value }: { index: number; columnHeader: string; value: string }) {
     const [hour, minute, _second] = value.split(':');
     await this.get({ index, columnHeader }).click();
-    await this.get({ index, columnHeader }).click();
+    await this.get({ index, columnHeader }).dblclick();
     await this.selectTime({ hour: +hour, minute: +minute });
     await this.save();
   }