From 92e37cffe13e6cebc6f13648509d863885c8f521 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa@nocodb.com>
Date: Fri, 22 Dec 2023 10:31:06 +0000
Subject: [PATCH] fix: Fixed issue with focus for Mulit select, single select,
 percent, Links, belongs to and disabled for Barcode and QRCode and minor
 fixes

---
 .../nc-gui/components/cell/MultiSelect.vue    | 12 ++++-
 packages/nc-gui/components/cell/Percent.vue   | 48 ++++++++++++++++++-
 .../nc-gui/components/cell/SingleSelect.vue   | 27 +++++++++--
 .../components/cell/attachment/index.vue      |  3 +-
 packages/nc-gui/components/nc/Button.vue      |  1 +
 .../smartsheet/expanded-form/index.vue        | 26 ++++++++++
 .../components/virtual-cell/BelongsTo.vue     |  9 ++++
 .../nc-gui/components/virtual-cell/Links.vue  | 17 +++++++
 .../nc-gui/components/virtual-cell/QrCode.vue |  2 -
 .../virtual-cell/barcode/Barcode.vue          |  6 +--
 10 files changed, 138 insertions(+), 13 deletions(-)

diff --git a/packages/nc-gui/components/cell/MultiSelect.vue b/packages/nc-gui/components/cell/MultiSelect.vue
index 764da329c2..bffe481958 100644
--- a/packages/nc-gui/components/cell/MultiSelect.vue
+++ b/packages/nc-gui/components/cell/MultiSelect.vue
@@ -341,6 +341,16 @@ const selectedOpts = computed(() => {
     return selectedOptions
   }, [])
 })
+
+const onKeyDown = (e: KeyboardEvent) => {
+  // Tab
+  if (e.key === 'Tab') {
+    isOpen.value = false
+    return
+  }
+
+  e.stopPropagation()
+}
 </script>
 
 <template>
@@ -403,7 +413,7 @@ const selectedOpts = computed(() => {
       :class="{ 'caret-transparent': !hasEditRoles }"
       :dropdown-class-name="`nc-dropdown-multi-select-cell !min-w-200px ${isOpen ? 'active' : ''}`"
       @search="search"
-      @keydown.stop
+      @keydown="onKeyDown"
       @focus="isOpen = true"
       @blur="isOpen = false"
     >
diff --git a/packages/nc-gui/components/cell/Percent.vue b/packages/nc-gui/components/cell/Percent.vue
index 516ddfe294..36b858229b 100644
--- a/packages/nc-gui/components/cell/Percent.vue
+++ b/packages/nc-gui/components/cell/Percent.vue
@@ -20,6 +20,8 @@ const isEditColumn = inject(EditColumnInj, ref(false))
 
 const _vModel = useVModel(props, 'modelValue', emits)
 
+const wrapperRef = ref<HTMLElement>()
+
 const vModel = computed({
   get: () => _vModel.value,
   set: (value) => {
@@ -56,6 +58,18 @@ const onBlur = () => {
 
 const onFocus = () => {
   cellFocused.value = true
+  editEnabled.value = true
+  expandedEditEnabled.value = true
+}
+
+const onWrapperFocus = () => {
+  cellFocused.value = true
+  editEnabled.value = true
+  expandedEditEnabled.value = true
+
+  nextTick(() => {
+    wrapperRef.value?.querySelector('input')?.focus()
+  })
 }
 
 const onMouseover = () => {
@@ -67,10 +81,41 @@ const onMouseleave = () => {
     expandedEditEnabled.value = false
   }
 }
+
+const onTabPress = (e: KeyboardEvent) => {
+  if (e.shiftKey) {
+    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) => {
+      return el.querySelector('.nc-filter-value-select') === wrapperRef.value
+    })
+
+    if (focusesNcCellIndex >= 0) {
+      const nodes = document.querySelectorAll('.nc-expanded-form-row .nc-data-cell')
+      for (let i = focusesNcCellIndex - 1; i >= 0; i--) {
+        const lastFormItem = nodes[i].querySelector('[tabindex="0"]') as HTMLElement
+        if (lastFormItem) {
+          lastFormItem.focus()
+          break
+        }
+      }
+    }
+  }
+}
 </script>
 
 <template>
-  <div class="nc-filter-value-select w-full" @mouseover="onMouseover" @mouseleave="onMouseleave">
+  <div
+    ref="wrapperRef"
+    tabindex="0"
+    class="nc-filter-value-select w-full focus:outline-transparent"
+    @mouseover="onMouseover"
+    @mouseleave="onMouseleave"
+    @focus="onWrapperFocus"
+  >
     <input
       v-if="(!isExpandedFormOpen && editEnabled) || (isExpandedFormOpen && expandedEditEnabled)"
       :ref="focus"
@@ -86,6 +131,7 @@ const onMouseleave = () => {
       @keydown.right.stop
       @keydown.up.stop
       @keydown.delete.stop
+      @keydown.tab="onTabPress"
       @selectstart.capture.stop
       @mousedown.stop
     />
diff --git a/packages/nc-gui/components/cell/SingleSelect.vue b/packages/nc-gui/components/cell/SingleSelect.vue
index be20dbfbc1..264f164511 100644
--- a/packages/nc-gui/components/cell/SingleSelect.vue
+++ b/packages/nc-gui/components/cell/SingleSelect.vue
@@ -215,6 +215,14 @@ const onKeydown = (e: KeyboardEvent) => {
   if (e.key === 'Enter') {
     e.stopPropagation()
   }
+
+  if (e.key === 'Escape') {
+    isOpen.value = false
+
+    setTimeout(() => {
+      aselect.value?.$el.querySelector('.ant-select-selection-search > input').focus()
+    }, 100)
+  }
 }
 
 const onSelect = () => {
@@ -259,6 +267,17 @@ useEventListener(document, 'click', handleClose, true)
 const selectedOpt = computed(() => {
   return options.value.find((o) => o.value === vModel.value || o.value === vModel.value?.trim())
 })
+
+watch(aselect, () => {
+  if (aselect.value) {
+    const inputDom = aselect.value.$el.querySelector('.ant-select-selection-search > input')
+
+    // Add tabindex="-1" to input element
+    if (inputDom) {
+      inputDom.setAttribute('tabindex', '-1')
+    }
+  }
+})
 </script>
 
 <template>
@@ -299,7 +318,7 @@ const selectedOpt = computed(() => {
       </a-tag>
     </div>
 
-    <a-select
+    <NcSelect
       v-else
       ref="aselect"
       v-model:value="vModel"
@@ -311,11 +330,11 @@ const selectedOpt = computed(() => {
       :open="isOpen && editAllowed"
       :disabled="readOnly || !editAllowed"
       :show-arrow="hasEditRoles && !readOnly && active && vModel === null"
-      :dropdown-class-name="`nc-dropdown-single-select-cell !min-w-200px ${isOpen && active ? 'active' : ''}`"
-      :show-search="!isMobileMode && isOpen && active"
+      :dropdown-class-name="`nc-dropdown-single-select-cell ${isOpen && active ? 'active' : ''}`"
       @select="onSelect"
       @keydown="onKeydown($event)"
       @search="search"
+      @blur="isOpen = false"
     >
       <a-select-option
         v-for="op of options"
@@ -361,7 +380,7 @@ const selectedOpt = computed(() => {
           </div>
         </div>
       </a-select-option>
-    </a-select>
+    </NcSelect>
   </div>
 </template>
 
diff --git a/packages/nc-gui/components/cell/attachment/index.vue b/packages/nc-gui/components/cell/attachment/index.vue
index 42a05aedcf..0f6989022d 100644
--- a/packages/nc-gui/components/cell/attachment/index.vue
+++ b/packages/nc-gui/components/cell/attachment/index.vue
@@ -180,7 +180,6 @@ const onImageClick = (item: any) => {
 <template>
   <div
     ref="attachmentCellRef"
-    tabindex="0"
     :style="{
       height: isForm || isExpandedForm ? undefined : `max(${(rowHeight || 1) * 1.8}rem, 41px)`,
     }"
@@ -207,7 +206,9 @@ const onImageClick = (item: any) => {
       :class="{ 'sm:(mx-auto px-4) xs:(w-full min-w-8)': !visibleItems.length }"
       class="group cursor-pointer py-1 flex gap-1 items-center active:(ring ring-accent ring-opacity-100) rounded border-none shadow-sm hover:(bg-primary bg-opacity-10) dark:(!bg-slate-500)"
       data-testid="attachment-cell-file-picker-button"
+      tabindex="0"
       @click="open"
+      @keydown.enter="open"
     >
       <component :is="iconMap.reload" v-if="isLoading" :class="{ 'animate-infinite animate-spin': isLoading }" />
 
diff --git a/packages/nc-gui/components/nc/Button.vue b/packages/nc-gui/components/nc/Button.vue
index 349d7af279..5a180e094a 100644
--- a/packages/nc-gui/components/nc/Button.vue
+++ b/packages/nc-gui/components/nc/Button.vue
@@ -84,6 +84,7 @@ useEventListener(NcButton, 'mousedown', () => {
       xxsmall: size === 'xxsmall',
       focused: isFocused,
     }"
+    :tabindex="props.disabled ? -1 : 0"
     @focus="onFocus"
     @blur="onBlur"
   >
diff --git a/packages/nc-gui/components/smartsheet/expanded-form/index.vue b/packages/nc-gui/components/smartsheet/expanded-form/index.vue
index 3509353a1d..cce9329ffb 100644
--- a/packages/nc-gui/components/smartsheet/expanded-form/index.vue
+++ b/packages/nc-gui/components/smartsheet/expanded-form/index.vue
@@ -90,6 +90,8 @@ const { isUIAllowed } = useRoles()
 
 const readOnly = computed(() => !isUIAllowed('dataEdit') || isPublic.value)
 
+const expandedFormScrollWrapper = ref()
+
 const reloadTrigger = inject(ReloadRowDataHookInj, createEventHook())
 
 const { addOrEditStackRow } = useKanbanViewStoreOrThrow()
@@ -439,6 +441,13 @@ const preventModalStatus = computed({
 })
 
 const onIsExpandedUpdate = (v: boolean) => {
+  let isDropdownOpen = false
+  document.querySelectorAll('.ant-select-dropdown').forEach((el) => {
+    isDropdownOpen = isDropdownOpen || el.checkVisibility()
+  })
+
+  if (isDropdownOpen) return
+
   if (changedColumns.value.size === 0 && !isUnsavedFormExist.value) {
     isExpanded.value = v
   } else if (!v) {
@@ -451,6 +460,22 @@ const onIsExpandedUpdate = (v: boolean) => {
 const isReadOnlyVirtualCell = (column: ColumnType) => {
   return isRollup(column) || isFormula(column) || isBarcode(column) || isLookup(column) || isQrCode(column)
 }
+
+// Small hack. We need to scroll to the bottom of the form after its mounted and back to top.
+// So that tab to next row works properly, as otherwise browser will focus to save button
+// when we reach to the bottom of the visual scrollable area, not the actual bottom of the form
+watch([expandedFormScrollWrapper, isLoading], () => {
+  if (isMobileMode.value) return
+
+  if (expandedFormScrollWrapper.value && !isLoading.value) {
+    const height = expandedFormScrollWrapper.value.scrollHeight
+    expandedFormScrollWrapper.value.scrollTop = height
+
+    setTimeout(() => {
+      expandedFormScrollWrapper.value.scrollTop = 0
+    }, 125)
+  }
+})
 </script>
 
 <script lang="ts">
@@ -620,6 +645,7 @@ export default {
           }"
         >
           <div
+            ref="expandedFormScrollWrapper"
             class="flex flex-col flex-grow mt-2 h-full max-h-full nc-scrollbar-md pb-6 items-center w-full bg-white p-4 xs:p-0"
           >
             <div
diff --git a/packages/nc-gui/components/virtual-cell/BelongsTo.vue b/packages/nc-gui/components/virtual-cell/BelongsTo.vue
index f4be6afb5d..67cbaa0d80 100644
--- a/packages/nc-gui/components/virtual-cell/BelongsTo.vue
+++ b/packages/nc-gui/components/virtual-cell/BelongsTo.vue
@@ -83,6 +83,14 @@ const belongsToColumn = computed(
   () =>
     relatedTableMeta.value?.columns?.find((c: any) => c.title === relatedTableDisplayValueProp.value) as ColumnType | undefined,
 )
+
+const plusBtnRef = ref<HTMLElement | null>(null)
+
+watch([listItemsDlg], () => {
+  if (!listItemsDlg.value) {
+    plusBtnRef.value?.focus()
+  }
+})
 </script>
 
 <template>
@@ -101,6 +109,7 @@ const belongsToColumn = computed(
 
     <div
       v-if="!readOnly && (isUIAllowed('dataEdit') || isForm) && !isUnderLookup"
+      ref="plusBtnRef"
       class="flex justify-end group gap-1 min-h-[30px] items-center"
       tabindex="0"
       @keydown.enter.stop="listItemsDlg = true"
diff --git a/packages/nc-gui/components/virtual-cell/Links.vue b/packages/nc-gui/components/virtual-cell/Links.vue
index 17c91945f4..e8d6109f50 100644
--- a/packages/nc-gui/components/virtual-cell/Links.vue
+++ b/packages/nc-gui/components/virtual-cell/Links.vue
@@ -102,6 +102,21 @@ const openListDlg = () => {
 
   listItemsDlg.value = true
 }
+
+const plusBtnRef = ref<HTMLElement | null>(null)
+const childListDlgRef = ref<HTMLElement | null>(null)
+
+watch([childListDlg], () => {
+  if (!childListDlg.value) {
+    childListDlgRef.value?.focus()
+  }
+})
+
+watch([listItemsDlg], () => {
+  if (!listItemsDlg.value) {
+    plusBtnRef.value?.focus()
+  }
+})
 </script>
 
 <template>
@@ -109,6 +124,7 @@ const openListDlg = () => {
     <div class="block flex-shrink truncate">
       <component
         :is="isUnderLookup ? 'span' : 'a'"
+        ref="childListDlgRef"
         v-e="['c:cell:links:modal:open']"
         :title="textVal"
         class="text-center nc-datatype-link underline-transparent"
@@ -124,6 +140,7 @@ const openListDlg = () => {
 
     <div
       v-if="!isUnderLookup"
+      ref="plusBtnRef"
       tabindex="0"
       class="!xs:hidden flex group justify-end group-hover:flex items-center"
       @keydown.enter.stop="openListDlg"
diff --git a/packages/nc-gui/components/virtual-cell/QrCode.vue b/packages/nc-gui/components/virtual-cell/QrCode.vue
index c1af61c56c..b3ed330f66 100644
--- a/packages/nc-gui/components/virtual-cell/QrCode.vue
+++ b/packages/nc-gui/components/virtual-cell/QrCode.vue
@@ -89,13 +89,11 @@ const { showEditNonEditableFieldWarning, showClearNonEditableFieldWarning } = us
   >
     <img
       v-if="showQrCode && rowHeight"
-      tabindex="0"
       :style="{ height: rowHeight ? `${rowHeight * 1.4}rem` : `1.4rem` }"
       :src="qrCode"
       :alt="$t('title.qrCode')"
       class="min-w-[1.4em]"
       @click="showQrModal"
-      @keydown.enter.stop="showQrModal"
     />
     <img v-else-if="showQrCode" class="mx-auto min-w-[1.4em]" :src="qrCode" :alt="$t('title.qrCode')" @click="showQrModal" />
   </div>
diff --git a/packages/nc-gui/components/virtual-cell/barcode/Barcode.vue b/packages/nc-gui/components/virtual-cell/barcode/Barcode.vue
index b46ea698da..05b23572da 100644
--- a/packages/nc-gui/components/virtual-cell/barcode/Barcode.vue
+++ b/packages/nc-gui/components/virtual-cell/barcode/Barcode.vue
@@ -64,11 +64,10 @@ const rowHeight = inject(RowHeightInj, ref(undefined))
     <JsBarcodeWrapper
       v-if="showBarcode && rowHeight"
       :barcode-value="barcodeValue"
-      tabindex="0"
+      tabindex="-1"
       :barcode-format="barcodeMeta.barcodeFormat"
       :custom-style="{ height: rowHeight ? `${rowHeight * 1.4}rem` : `1.4rem`, width: 40 }"
       @on-click-barcode="showBarcodeModal"
-      @keydown.enter.stop="showBarcodeModal"
     >
       <template #barcodeRenderError>
         <div class="text-left text-wrap mt-2 text-[#e65100] text-xs" data-testid="barcode-invalid-input-message">
@@ -78,11 +77,10 @@ const rowHeight = inject(RowHeightInj, ref(undefined))
     </JsBarcodeWrapper>
     <JsBarcodeWrapper
       v-else-if="showBarcode"
-      tabindex="0"
+      tabindex="-1"
       :barcode-value="barcodeValue"
       :barcode-format="barcodeMeta.barcodeFormat"
       @on-click-barcode="showBarcodeModal"
-      @keydown.enter.stop="showBarcodeModal"
     >
       <template #barcodeRenderError>
         <div class="text-left text-wrap mt-2 text-[#e65100] text-xs" data-testid="barcode-invalid-input-message">