From 44754e1e9b03030f48d56eb465ed9facdb7733bc Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Thu, 28 Dec 2023 14:12:28 +0530
Subject: [PATCH] fix: tab focus issue in shared form and expanded form

---
 packages/nc-gui/components/cell/Currency.vue  | 17 ++++++++++++--
 .../nc-gui/components/cell/DatePicker.vue     |  2 +-
 packages/nc-gui/components/cell/Decimal.vue   |  7 ++++--
 packages/nc-gui/components/cell/Duration.vue  |  6 ++++-
 packages/nc-gui/components/cell/Email.vue     |  6 ++++-
 packages/nc-gui/components/cell/Float.vue     |  7 ++++--
 packages/nc-gui/components/cell/Integer.vue   |  7 ++++--
 packages/nc-gui/components/cell/Percent.vue   | 19 ++++++++++-----
 .../nc-gui/components/cell/PhoneNumber.vue    |  7 ++++--
 packages/nc-gui/components/cell/Text.vue      | 17 ++++++++++++--
 packages/nc-gui/components/cell/TextArea.vue  |  3 ++-
 packages/nc-gui/components/cell/Url.vue       |  6 ++++-
 .../components/smartsheet/DivDataCell.vue     | 23 ++++++++++++++++++-
 13 files changed, 103 insertions(+), 24 deletions(-)

diff --git a/packages/nc-gui/components/cell/Currency.vue b/packages/nc-gui/components/cell/Currency.vue
index cf38769f9c..998830186b 100644
--- a/packages/nc-gui/components/cell/Currency.vue
+++ b/packages/nc-gui/components/cell/Currency.vue
@@ -1,6 +1,16 @@
 <script setup lang="ts">
 import type { VNodeRef } from '@vue/runtime-core'
-import { ColumnInj, EditColumnInj, EditModeInj, IsExpandedFormOpenInj, computed, inject, parseProp, useVModel } from '#imports'
+import {
+  ColumnInj,
+  EditColumnInj,
+  EditModeInj,
+  IsExpandedFormOpenInj,
+  IsFormInj,
+  computed,
+  inject,
+  parseProp,
+  useVModel,
+} from '#imports'
 
 interface Props {
   modelValue: number | null | undefined
@@ -57,7 +67,10 @@ const currency = computed(() => {
 
 const isExpandedFormOpen = inject(IsExpandedFormOpenInj, ref(false))!
 
-const focus: VNodeRef = (el) => !isExpandedFormOpen.value && !isEditColumn.value && (el as HTMLInputElement)?.focus()
+const isForm = inject(IsFormInj)!
+
+const focus: VNodeRef = (el) =>
+  !isExpandedFormOpen.value && !isEditColumn.value && !isForm.value && (el as HTMLInputElement)?.focus()
 
 const submitCurrency = () => {
   if (lastSaved.value !== vModel.value) {
diff --git a/packages/nc-gui/components/cell/DatePicker.vue b/packages/nc-gui/components/cell/DatePicker.vue
index b50f4189b1..39d807774b 100644
--- a/packages/nc-gui/components/cell/DatePicker.vue
+++ b/packages/nc-gui/components/cell/DatePicker.vue
@@ -241,7 +241,7 @@ const clickHandler = () => {
   <a-date-picker
     v-model:value="localState"
     :picker="picker"
-    tabindex="0"
+    :tabindex="0"
     :bordered="false"
     class="!w-full !py-1 !border-none"
     :class="{ 'nc-null': modelValue === null && showNull, '!px-2': isExpandedFormOpen, '!px-0': !isExpandedFormOpen }"
diff --git a/packages/nc-gui/components/cell/Decimal.vue b/packages/nc-gui/components/cell/Decimal.vue
index 8fc76956a6..aad130039f 100644
--- a/packages/nc-gui/components/cell/Decimal.vue
+++ b/packages/nc-gui/components/cell/Decimal.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import type { VNodeRef } from '@vue/runtime-core'
-import { EditColumnInj, EditModeInj, IsExpandedFormOpenInj, inject, useVModel } from '#imports'
+import { EditColumnInj, EditModeInj, IsExpandedFormOpenInj, IsFormInj, inject, useVModel } from '#imports'
 
 interface Props {
   // when we set a number, then it is number type
@@ -63,6 +63,8 @@ const precision = computed(() => {
 
 const isExpandedFormOpen = inject(IsExpandedFormOpenInj, ref(false))!
 
+const isForm = inject(IsFormInj)!
+
 // Handle the arrow keys as its default behavior is to increment/decrement the value
 const onKeyDown = (e: any) => {
   if (e.key === 'ArrowDown') {
@@ -80,7 +82,8 @@ const onKeyDown = (e: any) => {
   }
 }
 
-const focus: VNodeRef = (el) => !isExpandedFormOpen.value && !isEditColumn.value && (el as HTMLInputElement)?.focus()
+const focus: VNodeRef = (el) =>
+  !isExpandedFormOpen.value && !isEditColumn.value && !isForm.value && (el as HTMLInputElement)?.focus()
 
 watch(isExpandedFormOpen, () => {
   if (!isExpandedFormOpen.value) {
diff --git a/packages/nc-gui/components/cell/Duration.vue b/packages/nc-gui/components/cell/Duration.vue
index 3905e3bea6..b4bf77263c 100644
--- a/packages/nc-gui/components/cell/Duration.vue
+++ b/packages/nc-gui/components/cell/Duration.vue
@@ -5,6 +5,7 @@ import {
   EditColumnInj,
   EditModeInj,
   IsExpandedFormOpenInj,
+  IsFormInj,
   computed,
   convertDurationToSeconds,
   convertMS2Duration,
@@ -83,7 +84,10 @@ const submitDuration = () => {
 
 const isExpandedFormOpen = inject(IsExpandedFormOpenInj, ref(false))!
 
-const focus: VNodeRef = (el) => !isExpandedFormOpen.value && !isEditColumn.value && (el as HTMLInputElement)?.focus()
+const isForm = inject(IsFormInj)!
+
+const focus: VNodeRef = (el) =>
+  !isExpandedFormOpen.value && !isEditColumn.value && !isForm.value && (el as HTMLInputElement)?.focus()
 </script>
 
 <template>
diff --git a/packages/nc-gui/components/cell/Email.vue b/packages/nc-gui/components/cell/Email.vue
index 088542563a..b68282574c 100644
--- a/packages/nc-gui/components/cell/Email.vue
+++ b/packages/nc-gui/components/cell/Email.vue
@@ -4,6 +4,7 @@ import {
   EditColumnInj,
   EditModeInj,
   IsExpandedFormOpenInj,
+  IsFormInj,
   IsSurveyFormInj,
   computed,
   inject,
@@ -50,7 +51,10 @@ const validEmail = computed(() => vModel.value && validateEmail(vModel.value))
 
 const isExpandedFormOpen = inject(IsExpandedFormOpenInj, ref(false))!
 
-const focus: VNodeRef = (el) => !isExpandedFormOpen.value && !isEditColumn.value && (el as HTMLInputElement)?.focus()
+const isForm = inject(IsFormInj)!
+
+const focus: VNodeRef = (el) =>
+  !isExpandedFormOpen.value && !isEditColumn.value && !isForm.value && (el as HTMLInputElement)?.focus()
 
 watch(
   () => editEnabled.value,
diff --git a/packages/nc-gui/components/cell/Float.vue b/packages/nc-gui/components/cell/Float.vue
index b40a33f701..8460cbcf35 100644
--- a/packages/nc-gui/components/cell/Float.vue
+++ b/packages/nc-gui/components/cell/Float.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import type { VNodeRef } from '@vue/runtime-core'
-import { EditColumnInj, EditModeInj, IsExpandedFormOpenInj, inject, useVModel } from '#imports'
+import { EditColumnInj, EditModeInj, IsExpandedFormOpenInj, IsFormInj, inject, useVModel } from '#imports'
 
 interface Props {
   // when we set a number, then it is number type
@@ -40,7 +40,10 @@ const vModel = computed({
 
 const isExpandedFormOpen = inject(IsExpandedFormOpenInj, ref(false))!
 
-const focus: VNodeRef = (el) => !isExpandedFormOpen.value && !isEditColumn.value && (el as HTMLInputElement)?.focus()
+const isForm = inject(IsFormInj)!
+
+const focus: VNodeRef = (el) =>
+  !isExpandedFormOpen.value && !isEditColumn.value && !isForm.value && (el as HTMLInputElement)?.focus()
 </script>
 
 <template>
diff --git a/packages/nc-gui/components/cell/Integer.vue b/packages/nc-gui/components/cell/Integer.vue
index 9f27e38478..c1e27ef338 100644
--- a/packages/nc-gui/components/cell/Integer.vue
+++ b/packages/nc-gui/components/cell/Integer.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { VNodeRef } from '@vue/runtime-core'
-import { EditColumnInj, EditModeInj, IsExpandedFormOpenInj, inject, useVModel } from '#imports'
+import { EditColumnInj, EditModeInj, IsExpandedFormOpenInj, IsFormInj, inject, useVModel } from '#imports'
 
 interface Props {
   // when we set a number, then it is number type
@@ -48,7 +48,10 @@ const vModel = computed({
 
 const isExpandedFormOpen = inject(IsExpandedFormOpenInj, ref(false))!
 
-const focus: VNodeRef = (el) => !isExpandedFormOpen.value && !isEditColumn.value && (el as HTMLInputElement)?.focus()
+const isForm = inject(IsFormInj)!
+
+const focus: VNodeRef = (el) =>
+  !isExpandedFormOpen.value && !isEditColumn.value && !isForm.value && (el as HTMLInputElement)?.focus()
 
 function onKeyDown(e: any) {
   const cmdOrCtrl = isMac() ? e.metaKey : e.ctrlKey
diff --git a/packages/nc-gui/components/cell/Percent.vue b/packages/nc-gui/components/cell/Percent.vue
index c776bd3fc6..94acc9186a 100644
--- a/packages/nc-gui/components/cell/Percent.vue
+++ b/packages/nc-gui/components/cell/Percent.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { VNodeRef } from '@vue/runtime-core'
-import { EditColumnInj, EditModeInj, IsExpandedFormOpenInj, inject, useVModel } from '#imports'
+import { EditColumnInj, EditModeInj, IsExpandedFormOpenInj, IsFormInj, inject, useVModel } from '#imports'
 
 interface Props {
   modelValue?: number | string | null
@@ -35,7 +35,10 @@ const vModel = computed({
 
 const isExpandedFormOpen = inject(IsExpandedFormOpenInj, ref(false))!
 
-const focus: VNodeRef = (el) => !isExpandedFormOpen.value && !isEditColumn.value && (el as HTMLInputElement)?.focus()
+const isForm = inject(IsFormInj)!
+
+const focus: VNodeRef = (el) =>
+  !isExpandedFormOpen.value && !isEditColumn.value && !isForm.value && (el as HTMLInputElement)?.focus()
 
 const cellFocused = ref(false)
 
@@ -84,18 +87,22 @@ const onMouseleave = () => {
 }
 
 const onTabPress = (e: KeyboardEvent) => {
-  if (e.shiftKey) {
+  if (e.shiftKey && (isExpandedFormOpen.value || isForm.value)) {
     e.preventDefault()
 
     // Shift + Tab does not work for percent cell
     // so we manually focus on the last form item
-
-    const focusesNcCellIndex = Array.from(document.querySelectorAll('.nc-expanded-form-row .nc-data-cell')).findIndex((el) => {
+    const focusesNcCellIndex = Array.from(
+      document.querySelectorAll(`${isExpandedFormOpen.value ? '.nc-expanded-form-row' : '.nc-form-wrapper'} .nc-data-cell`),
+    ).findIndex((el) => {
       return el.querySelector('.nc-filter-value-select') === wrapperRef.value
     })
 
     if (focusesNcCellIndex >= 0) {
-      const nodes = document.querySelectorAll('.nc-expanded-form-row .nc-data-cell')
+      const nodes = document.querySelectorAll(
+        `${isExpandedFormOpen.value ? '.nc-expanded-form-row' : '.nc-form-wrapper'} .nc-data-cell`,
+      )
+
       for (let i = focusesNcCellIndex - 1; i >= 0; i--) {
         const lastFormItem = nodes[i].querySelector('[tabindex="0"]') as HTMLElement
         if (lastFormItem) {
diff --git a/packages/nc-gui/components/cell/PhoneNumber.vue b/packages/nc-gui/components/cell/PhoneNumber.vue
index 46923aecdc..1211a863e6 100644
--- a/packages/nc-gui/components/cell/PhoneNumber.vue
+++ b/packages/nc-gui/components/cell/PhoneNumber.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import type { VNodeRef } from '@vue/runtime-core'
 import isMobilePhone from 'validator/lib/isMobilePhone'
-import { EditColumnInj, EditModeInj, IsExpandedFormOpenInj, IsSurveyFormInj, computed, inject } from '#imports'
+import { EditColumnInj, EditModeInj, IsExpandedFormOpenInj, IsFormInj, IsSurveyFormInj, computed, inject } from '#imports'
 
 interface Props {
   modelValue: string | null | number | undefined
@@ -42,7 +42,10 @@ const validEmail = computed(() => vModel.value && isMobilePhone(vModel.value))
 
 const isExpandedFormOpen = inject(IsExpandedFormOpenInj, ref(false))!
 
-const focus: VNodeRef = (el) => !isExpandedFormOpen.value && !isEditColumn.value && (el as HTMLInputElement)?.focus()
+const isForm = inject(IsFormInj)!
+
+const focus: VNodeRef = (el) =>
+  !isExpandedFormOpen.value && !isEditColumn.value && !isForm.value && (el as HTMLInputElement)?.focus()
 
 watch(
   () => editEnabled.value,
diff --git a/packages/nc-gui/components/cell/Text.vue b/packages/nc-gui/components/cell/Text.vue
index f8d237a530..c8d69d06f0 100644
--- a/packages/nc-gui/components/cell/Text.vue
+++ b/packages/nc-gui/components/cell/Text.vue
@@ -1,6 +1,16 @@
 <script setup lang="ts">
 import type { VNodeRef } from '@vue/runtime-core'
-import { EditColumnInj, EditModeInj, IsExpandedFormOpenInj, ReadonlyInj, RowHeightInj, inject, ref, useVModel } from '#imports'
+import {
+  EditColumnInj,
+  EditModeInj,
+  IsExpandedFormOpenInj,
+  IsFormInj,
+  ReadonlyInj,
+  RowHeightInj,
+  inject,
+  ref,
+  useVModel,
+} from '#imports'
 
 interface Props {
   modelValue?: string | null
@@ -24,7 +34,10 @@ const vModel = useVModel(props, 'modelValue', emits)
 
 const isExpandedFormOpen = inject(IsExpandedFormOpenInj, ref(false))!
 
-const focus: VNodeRef = (el) => !isExpandedFormOpen.value && !isEditColumn.value && (el as HTMLInputElement)?.focus()
+const isForm = inject(IsFormInj)!
+
+const focus: VNodeRef = (el) =>
+  !isExpandedFormOpen.value && !isEditColumn.value && !isForm.value && (el as HTMLInputElement)?.focus()
 </script>
 
 <template>
diff --git a/packages/nc-gui/components/cell/TextArea.vue b/packages/nc-gui/components/cell/TextArea.vue
index eb94769b73..ec3b5efa68 100644
--- a/packages/nc-gui/components/cell/TextArea.vue
+++ b/packages/nc-gui/components/cell/TextArea.vue
@@ -55,7 +55,8 @@ const position = ref<
 
 const isDragging = ref(false)
 
-const focus: VNodeRef = (el) => !isExpandedFormOpen.value && !isEditColumn.value && (el as HTMLTextAreaElement)?.focus()
+const focus: VNodeRef = (el) =>
+  !isExpandedFormOpen.value && !isEditColumn.value && isForm.value && (el as HTMLTextAreaElement)?.focus()
 
 const height = computed(() => {
   if (isExpandedFormOpen.value) return 36 * 4
diff --git a/packages/nc-gui/components/cell/Url.vue b/packages/nc-gui/components/cell/Url.vue
index a622a8e94f..b624417e93 100644
--- a/packages/nc-gui/components/cell/Url.vue
+++ b/packages/nc-gui/components/cell/Url.vue
@@ -6,6 +6,7 @@ import {
   EditColumnInj,
   EditModeInj,
   IsExpandedFormOpenInj,
+  IsFormInj,
   IsSurveyFormInj,
   computed,
   inject,
@@ -70,7 +71,10 @@ const { cellUrlOptions } = useCellUrlConfig(url)
 
 const isExpandedFormOpen = inject(IsExpandedFormOpenInj, ref(false))!
 
-const focus: VNodeRef = (el) => !isExpandedFormOpen.value && !isEditColumn.value && (el as HTMLInputElement)?.focus()
+const isForm = inject(IsFormInj)!
+
+const focus: VNodeRef = (el) =>
+  !isExpandedFormOpen.value && !isEditColumn.value && isForm.value && (el as HTMLInputElement)?.focus()
 
 watch(
   () => editEnabled.value,
diff --git a/packages/nc-gui/components/smartsheet/DivDataCell.vue b/packages/nc-gui/components/smartsheet/DivDataCell.vue
index 9796cdec03..9dd1f911f0 100644
--- a/packages/nc-gui/components/smartsheet/DivDataCell.vue
+++ b/packages/nc-gui/components/smartsheet/DivDataCell.vue
@@ -4,10 +4,31 @@ import { CurrentCellInj, ref } from '#imports'
 const el = ref()
 
 provide(CurrentCellInj, el)
+
+const isExpandedFormOpen = inject(IsExpandedFormOpenInj, ref(false))!
+
+const isForm = inject(IsFormInj)!
+
+const onTabPress = () => {
+  if (!isExpandedFormOpen.value && !isForm.value) return
+
+  // Find the focused element
+  const focusedElement = document.activeElement
+
+  if (focusedElement) {
+    // Check if the focused element is a descendant of the wrapper
+    const closestWrapper = focusedElement.closest('.nc-data-cell')
+
+    // Scroll it into view
+    if (closestWrapper === el.value) {
+      el.value?.scrollIntoView({ block: 'center' })
+    }
+  }
+}
 </script>
 
 <template>
-  <div ref="el" class="select-none nc-data-cell">
+  <div ref="el" class="select-none nc-data-cell" @keydown.tab="onTabPress">
     <slot />
   </div>
 </template>