fix(nc-gui): use keyup listener to add new row on pressing tab or arrowDown from last row of last page (#8293)

* fix(nc-gui): use keyup to add new row on pressing tab or arrowDown from last row of last page

* fix(nc-gui): small changes

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

@@ -264,6 +264,8 @@ const showContextMenu = (e: MouseEvent, target?: { row: number; col: number }) =
 const isJsonExpand = ref(false)
 provide(JsonExpandInj, isJsonExpand)
 
+const isKeyDown = ref(false)
+
 // #Cell - 1
 
 async function clearCell(ctx: { row: number; col: number } | null, skipUpdate = false) {
@@ -582,12 +584,11 @@ const {
   makeEditable,
   scrollToCell,
   async (e: KeyboardEvent) => {
-    // ignore navigating if picker(Date, Time, DateTime, Year)
-    // or single/multi select options is open
-    const activePickerOrDropdownEl = document.querySelector(
+    // ignore navigating if single/multi select options is open
+    const activeDropdownEl = document.querySelector(
       '.nc-dropdown-single-select-cell.active,.nc-dropdown-multi-select-cell.active',
     )
-    if (activePickerOrDropdownEl) {
+    if (activeDropdownEl) {
       e.preventDefault()
       return true
     }
@@ -633,8 +634,8 @@ const {
         e.preventDefault()
 
         if (paginationDataRef.value?.isLastPage && isAddingEmptyRowAllowed.value) {
-          addEmptyRow()
-          await resetAndChangePage(dataRef.value.length - 1, 0)
+          isKeyDown.value = true
+
           return true
         } else if (!paginationDataRef.value?.isLastPage) {
           await resetAndChangePage(0, 0, 1)
@@ -652,8 +653,8 @@ const {
         e.preventDefault()
 
         if (paginationDataRef.value?.isLastPage && isAddingEmptyRowAllowed.value) {
-          addEmptyRow()
-          await resetAndChangePage(dataRef.value.length - 1, activeCell.col!)
+          isKeyDown.value = true
+
           return true
         } else if (!paginationDataRef.value?.isLastPage) {
           await resetAndChangePage(0, activeCell.col!, 1)
@@ -1194,6 +1195,24 @@ useEventListener(document, 'keyup', async (e: KeyboardEvent) => {
     altModifier.value = false
     disableUrlOverlay.value = false
   }
+
+  const activeDropdownEl = document.querySelector('.nc-dropdown-single-select-cell.active,.nc-dropdown-multi-select-cell.active')
+
+  const cmdOrCtrl = isMac() ? e.metaKey : e.ctrlKey
+
+  if (isKeyDown.value && !isRichModalOpen && !activeDropdownEl && !isDrawerOrModalExist() && !cmdOrCtrl && !e.shiftKey && !e.altKey) {
+    if (
+      (e.key === 'Tab' && activeCell.row === dataRef.value.length - 1 && activeCell.col === fields.value?.length - 1) ||
+      (e.key === 'ArrowDown' &&
+        activeCell.row === dataRef.value.length - 1 &&
+        paginationDataRef.value?.isLastPage &&
+        isAddingEmptyRowAllowed.value)
+    ) {
+      addEmptyRow()
+      await resetAndChangePage(dataRef.value.length - 1, 0)
+      isKeyDown.value = false
+    }
+  }
 })
 
 useEventListener(document, 'keydown', async (e: KeyboardEvent) => {