From c2ebcc7d8b0bd67f1ae527857bb3bba92f46f7bc Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Sat, 20 Jan 2024 11:37:15 +0000
Subject: [PATCH] fix(nc-gui): readonly tab focus of some fields

---
 packages/nc-gui/components/cell/Email.vue       | 1 +
 packages/nc-gui/components/cell/PhoneNumber.vue | 1 +
 packages/nc-gui/components/cell/Rating.vue      | 1 +
 packages/nc-gui/components/cell/RichText.vue    | 7 +++++--
 packages/nc-gui/components/cell/Url.vue         | 2 ++
 5 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui/components/cell/Email.vue b/packages/nc-gui/components/cell/Email.vue
index d4a4976574..b6b4b82bed 100644
--- a/packages/nc-gui/components/cell/Email.vue
+++ b/packages/nc-gui/components/cell/Email.vue
@@ -100,6 +100,7 @@ watch(
     class="py-1 text-sm underline hover:opacity-75 inline-block"
     :href="`mailto:${vModel}`"
     target="_blank"
+    :tabindex="readOnly ? -1 : 0"
   >
     <LazyCellClampedText :value="vModel" :lines="rowHeight" :class="isExpandedFormOpen ? 'px-2' : 'px-0'" />
   </nuxt-link>
diff --git a/packages/nc-gui/components/cell/PhoneNumber.vue b/packages/nc-gui/components/cell/PhoneNumber.vue
index 5778524f82..0290cb6068 100644
--- a/packages/nc-gui/components/cell/PhoneNumber.vue
+++ b/packages/nc-gui/components/cell/PhoneNumber.vue
@@ -90,6 +90,7 @@ watch(
     :href="`tel:${vModel}`"
     target="_blank"
     rel="noopener noreferrer"
+    :tabindex="readOnly ? -1 : 0"
   >
     <LazyCellClampedText :value="vModel" :lines="rowHeight" :class="isExpandedFormOpen ? 'px-2' : 'px-0'" />
   </a>
diff --git a/packages/nc-gui/components/cell/Rating.vue b/packages/nc-gui/components/cell/Rating.vue
index bff031b272..d044d3214f 100644
--- a/packages/nc-gui/components/cell/Rating.vue
+++ b/packages/nc-gui/components/cell/Rating.vue
@@ -76,6 +76,7 @@ watch(rateDomRef, () => {
     v-model:value="vModel"
     :disabled="readOnly"
     :count="ratingMeta.max"
+    :class="readOnly ? 'pointer-events-none' : ''"
     :style="`color: ${ratingMeta.color}; padding: ${isExpandedFormOpen ? '0px 8px' : '0px 5px'};`"
     @keydown="onKeyPress"
   >
diff --git a/packages/nc-gui/components/cell/RichText.vue b/packages/nc-gui/components/cell/RichText.vue
index d5680bbf68..fa4be15456 100644
--- a/packages/nc-gui/components/cell/RichText.vue
+++ b/packages/nc-gui/components/cell/RichText.vue
@@ -8,7 +8,7 @@ import { generateJSON } from '@tiptap/html'
 import Underline from '@tiptap/extension-underline'
 import { TaskItem } from '@/helpers/dbTiptapExtensions/task-item'
 import { Link } from '@/helpers/dbTiptapExtensions/links'
-import { IsExpandedFormOpenInj, RowHeightInj } from '#imports'
+import { IsExpandedFormOpenInj, RowHeightInj, ReadonlyInj } from '#imports'
 
 const props = defineProps<{
   value?: string | null
@@ -24,6 +24,8 @@ const isExpandedFormOpen = inject(IsExpandedFormOpenInj, ref(false))!
 
 const rowHeight = inject(RowHeightInj, ref(1 as const))
 
+const readOnlyCell = inject(ReadonlyInj, ref(false))
+
 const turndownService = new TurndownService({})
 
 turndownService.addRule('lineBreak', {
@@ -174,7 +176,7 @@ watch(editorDom, () => {
       'nc-rich-text-embed flex flex-col pl-1 w-full': !fullMode,
       'readonly': readOnly,
     }"
-    tabindex="0"
+    :tabindex="readOnlyCell ? -1 : 0"
   >
     <div
       v-if="showMenu && !readOnly"
@@ -191,6 +193,7 @@ watch(editorDom, () => {
     <CellRichTextLinkOptions v-if="editor" :editor="editor" />
     <EditorContent
       ref="editorDom"
+      :disabled="readOnly"
       :editor="editor"
       class="flex flex-col nc-textarea-rich-editor w-full"
       :class="{
diff --git a/packages/nc-gui/components/cell/Url.vue b/packages/nc-gui/components/cell/Url.vue
index 5fce0f5f3e..a62b4c6eb4 100644
--- a/packages/nc-gui/components/cell/Url.vue
+++ b/packages/nc-gui/components/cell/Url.vue
@@ -122,6 +122,7 @@ watch(
       class="py-1 z-3 text-sm underline hover:opacity-75"
       :to="url"
       :target="cellUrlOptions?.behavior === 'replace' ? undefined : '_blank'"
+      :tabindex="readOnly ? -1 : 0"
     >
       <LazyCellClampedText :value="value" :lines="rowHeight" :class="isExpandedFormOpen ? 'px-2' : 'px-0'" />
     </nuxt-link>
@@ -133,6 +134,7 @@ watch(
       class="py-1 z-3 w-full h-full text-center !no-underline hover:opacity-75"
       :to="url"
       :target="cellUrlOptions?.behavior === 'replace' ? undefined : '_blank'"
+      :tabindex="readOnly ? -1 : 0"
     >
       <LazyCellClampedText :value="cellUrlOptions.overlay" :lines="rowHeight" :class="isExpandedFormOpen ? 'px-2' : 'px-0'" />
     </nuxt-link>