From 79dee3d785fba90eec5053056be30419a3a47587 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Sat, 20 Jan 2024 11:37:16 +0000
Subject: [PATCH] fix(nc-gui): disable currency field if its readonly and
 checkbox field tab focus issue

---
 packages/nc-gui/components/cell/Checkbox.vue |  2 ++
 packages/nc-gui/components/cell/Currency.vue | 11 ++++++++---
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/packages/nc-gui/components/cell/Checkbox.vue b/packages/nc-gui/components/cell/Checkbox.vue
index 1689d07fcf..c6bfecc871 100644
--- a/packages/nc-gui/components/cell/Checkbox.vue
+++ b/packages/nc-gui/components/cell/Checkbox.vue
@@ -90,6 +90,7 @@ useSelectedCellKeyupListener(active, (e) => {
       'w-full justify-center': !isForm && !isGallery && !isExpandedFormOpen,
       'nc-cell-hover-show': !vModel && !readOnly,
       'opacity-0': readOnly && !vModel,
+      'pointer-events-none': readOnly,
     }"
     :style="{
       height:
@@ -98,6 +99,7 @@ useSelectedCellKeyupListener(active, (e) => {
     tabindex="0"
     @click="onClick(false, $event)"
     @keydown.enter.stop="onClick(true, $event)"
+    :tabindex="readOnly ? -1 : 0"
   >
     <div
       class="flex items-center"
diff --git a/packages/nc-gui/components/cell/Currency.vue b/packages/nc-gui/components/cell/Currency.vue
index 998830186b..f7ca6e7af9 100644
--- a/packages/nc-gui/components/cell/Currency.vue
+++ b/packages/nc-gui/components/cell/Currency.vue
@@ -10,6 +10,7 @@ import {
   inject,
   parseProp,
   useVModel,
+  ReadonlyInj,
 } from '#imports'
 
 interface Props {
@@ -28,6 +29,8 @@ const editEnabled = inject(EditModeInj)!
 
 const isEditColumn = inject(EditColumnInj, ref(false))
 
+const readOnly = inject(ReadonlyInj, ref(false))
+
 const _vModel = useVModel(props, 'modelValue', emit)
 
 const vModel = computed({
@@ -87,7 +90,7 @@ onMounted(() => {
 
 <template>
   <input
-    v-if="editEnabled"
+    v-if="!readOnly && editEnabled"
     :ref="focus"
     v-model="vModel"
     type="number"
@@ -105,10 +108,12 @@ onMounted(() => {
     @contextmenu.stop
   />
 
-  <span v-else-if="vModel === null && showNull" class="nc-null uppercase">{{ $t('general.null') }}</span>
+  <span v-else-if="vModel === null && showNull" class="nc-null uppercase" :class="isExpandedFormOpen ? 'px-2' : 'px-0'">{{
+    $t('general.null')
+  }}</span>
 
   <!-- only show the numeric value as previously string value was accepted -->
-  <span v-else-if="!isNaN(vModel)">{{ currency }}</span>
+  <span v-else-if="!isNaN(vModel)" :class="isExpandedFormOpen ? 'px-2' : 'px-0'">{{ currency }}</span>
 
   <!-- possibly unexpected string / null with showNull == false  -->
   <span v-else />