From 9ce9d4d5ecaf9170ef6eeec64f126c4891162aa9 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Sat, 9 Mar 2024 11:51:16 +0000
Subject: [PATCH] fix(nc-gui): focus form element only in tab press

---
 packages/nc-gui/components/smartsheet/Form.vue | 13 +++++--------
 1 file changed, 5 insertions(+), 8 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/Form.vue b/packages/nc-gui/components/smartsheet/Form.vue
index 30bb06f06b..f3ec311e57 100644
--- a/packages/nc-gui/components/smartsheet/Form.vue
+++ b/packages/nc-gui/components/smartsheet/Form.vue
@@ -1825,10 +1825,10 @@ useEventListener(
 .nc-form-field-ghost {
   @apply bg-gray-50;
 }
-:deep(.nc-form-input-required + button):focus {
+:deep(.nc-form-input-required + button):focus-visible {
   box-shadow: 0 0 0 2px #fff, 0 0 0 4px #3366ff;
 }
-:deep(.nc-form-switch-focus):focus {
+:deep(.nc-form-switch-focus):focus-visible {
   box-shadow: 0 0 0 2px #fff, 0 0 0 4px #3366ff;
 }
 .nc-form-field-layout {
@@ -1839,7 +1839,7 @@ useEventListener(
     .ant-radio {
       @apply !top-0;
 
-      &:focus-within .ant-radio-inner {
+      .ant-radio-input:focus-visible + .ant-radio-inner {
         box-shadow: 0 0 0 2px #fff, 0 0 0 4px #3366ff;
       }
     }
@@ -1847,12 +1847,9 @@ useEventListener(
 }
 
 .nc-form-wrapper {
-  .ant-switch:focus,
-  .ant-switch-checked:focus {
+  .ant-switch:focus-visible,
+  .ant-switch-checked:focus-visible {
     box-shadow: 0 0 0 2px #fff, 0 0 0 4px #3366ff;
-    &:hover {
-      box-shadow: none;
-    }
   }
 }
 </style>