From 57656baa4f5b286a175c57f3b1efe1773edcda7c Mon Sep 17 00:00:00 2001
From: Marcelo Paiva <mpaiva@gmail.com>
Date: Thu, 26 Feb 2026 08:04:45 -0500
Subject: [PATCH] Fix focus ring for all DaisyUI interactive components

SCSS: add .input, .select, .checkbox, .radio, .toggle, .tab, .link
to :focus-visible rule so DaisyUI's higher-specificity component-level
rules are overridden by our 8px blue outline in both stylesheets.

Vue: remove !outline-0 and !ring-0 (which used !important to kill
outlines entirely) from 21 elements across 4 template_builder files:
- field_settings.vue (13 inputs/selects)
- payment_settings.vue (5 inputs/selects)
- fields.vue (2 inputs)
- formula_modal.vue (1 textarea)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 app/javascript/application.scss               |  9 ++++++-
 app/javascript/form.scss                      |  9 ++++++-
 .../template_builder/field_settings.vue       | 26 +++++++++----------
 app/javascript/template_builder/fields.vue    |  4 +--
 .../template_builder/formula_modal.vue        |  2 +-
 .../template_builder/payment_settings.vue     | 10 +++----
 6 files changed, 37 insertions(+), 23 deletions(-)

diff --git a/app/javascript/application.scss b/app/javascript/application.scss
index d9ddd399..d43970a9 100644
--- a/app/javascript/application.scss
+++ b/app/javascript/application.scss
@@ -5,7 +5,14 @@
 @import "tailwindcss/utilities";
 
 :focus-visible,
-.btn:focus-visible {
+.btn:focus-visible,
+.input:focus-visible,
+.select:focus-visible,
+.checkbox:focus-visible,
+.radio:focus-visible,
+.toggle:focus-visible,
+.tab:focus-visible,
+.link:focus-visible {
   outline-color: rgb(14, 99, 200);
   outline-style: solid;
   outline-width: 8px;
diff --git a/app/javascript/form.scss b/app/javascript/form.scss
index d171688f..608b2dfc 100644
--- a/app/javascript/form.scss
+++ b/app/javascript/form.scss
@@ -5,7 +5,14 @@
 @import "tailwindcss/utilities";
 
 :focus-visible,
-.btn:focus-visible {
+.btn:focus-visible,
+.input:focus-visible,
+.select:focus-visible,
+.checkbox:focus-visible,
+.radio:focus-visible,
+.toggle:focus-visible,
+.tab:focus-visible,
+.link:focus-visible {
   outline-color: rgb(14, 99, 200);
   outline-style: solid;
   outline-width: 8px;
diff --git a/app/javascript/template_builder/field_settings.vue b/app/javascript/template_builder/field_settings.vue
index debf72f8..b8f42892 100644
--- a/app/javascript/template_builder/field_settings.vue
+++ b/app/javascript/template_builder/field_settings.vue
@@ -6,7 +6,7 @@
   >
     <select
       :placeholder="t('method')"
-      class="select select-bordered select-xs font-normal w-full max-w-xs !h-7 !outline-0 bg-transparent"
+      class="select select-bordered select-xs font-normal w-full max-w-xs !h-7 bg-transparent"
       @change="[field.preferences ||= {}, field.preferences.method = $event.target.value, $emit('save')]"
     >
       <option
@@ -34,7 +34,7 @@
     <select
       :placeholder="t('default_value')"
       dir="auto"
-      class="select select-bordered select-xs w-full max-w-xs h-7 !outline-0 font-normal bg-transparent"
+      class="select select-bordered select-xs w-full max-w-xs h-7 font-normal bg-transparent"
       @change="[field.default_value = $event.target.value, !field.default_value && delete field.default_value, $emit('save')]"
     >
       <option
@@ -70,7 +70,7 @@
       :placeholder="t('default_value')"
       dir="auto"
       :type="field.type"
-      class="input input-bordered input-xs w-full max-w-xs h-7 !outline-0 bg-transparent"
+      class="input input-bordered input-xs w-full max-w-xs h-7 bg-transparent"
       @blur="$emit('save')"
     >
     <label
@@ -88,7 +88,7 @@
     @click.stop
   >
     <select
-      class="select select-bordered select-xs w-full max-w-xs h-7 !outline-0 font-normal bg-transparent"
+      class="select select-bordered select-xs w-full max-w-xs h-7 font-normal bg-transparent"
       @change="onChangeValidation"
     >
       <option
@@ -131,7 +131,7 @@
         type="number"
         min="0"
         :value="lengthValidation.min"
-        class="input input-bordered w-full input-xs h-7 !outline-0 bg-transparent"
+        class="input input-bordered w-full input-xs h-7 bg-transparent"
         @input="field.validation.pattern = `.{${$event.target.value || 0},${lengthValidation.max || ''}}`"
         @blur="$emit('save')"
       >
@@ -149,7 +149,7 @@
         :placeholder="t('max')"
         type="number"
         min="1"
-        class="input input-bordered w-full input-xs h-7 !outline-0 bg-transparent"
+        class="input input-bordered w-full input-xs h-7 bg-transparent"
         :value="lengthValidation.max"
         @input="field.validation.pattern = `.{${lengthValidation.min},${$event.target.value || ''}}`"
         @blur="$emit('save')"
@@ -175,7 +175,7 @@
         type="number"
         min="0"
         :value="field.validation?.min"
-        class="input input-bordered w-full input-xs h-7 !outline-0 bg-transparent"
+        class="input input-bordered w-full input-xs h-7 bg-transparent"
         @input="[field.validation ||= {}, $event.target.value ? field.validation.min = $event.target.value : delete field.validation.min]"
         @blur="$emit('save')"
       >
@@ -193,7 +193,7 @@
         :placeholder="t('max')"
         type="number"
         min="1"
-        class="input input-bordered w-full input-xs h-7 !outline-0 bg-transparent"
+        class="input input-bordered w-full input-xs h-7 bg-transparent"
         :value="field.validation?.max"
         @input="[field.validation ||= {}, $event.target.value ? field.validation.max = $event.target.value : delete field.validation.max]"
         @blur="$emit('save')"
@@ -215,7 +215,7 @@
   >
     <select
       :placeholder="t('format')"
-      class="select select-bordered select-xs font-normal w-full max-w-xs !h-7 !outline-0 bg-transparent"
+      class="select select-bordered select-xs font-normal w-full max-w-xs !h-7 bg-transparent"
       @change="[field.preferences ||= {}, field.preferences.format = $event.target.value, $emit('save')]"
     >
       <option
@@ -245,7 +245,7 @@
       v-model="field.validation.pattern"
       :placeholder="t('regexp_validation')"
       dir="auto"
-      class="input input-bordered input-xs w-full max-w-xs h-7 !outline-0 bg-transparent"
+      class="input input-bordered input-xs w-full max-w-xs h-7 bg-transparent"
       @blur="$emit('save')"
     >
     <label
@@ -266,7 +266,7 @@
       v-model="field.validation.message"
       :placeholder="t('error_message')"
       dir="auto"
-      class="input input-bordered input-xs w-full max-w-xs h-7 !outline-0 bg-transparent"
+      class="input input-bordered input-xs w-full max-w-xs h-7 bg-transparent"
       @blur="$emit('save')"
     >
     <label
@@ -286,7 +286,7 @@
     <select
       v-model="field.preferences.format"
       :placeholder="t('format')"
-      class="select select-bordered select-xs font-normal w-full max-w-xs !h-7 !outline-0 bg-transparent"
+      class="select select-bordered select-xs font-normal w-full max-w-xs !h-7 bg-transparent"
       @change="$emit('save')"
     >
       <option
@@ -312,7 +312,7 @@
   >
     <select
       :placeholder="t('format')"
-      class="select select-bordered select-xs font-normal w-full max-w-xs !h-7 !outline-0 bg-transparent"
+      class="select select-bordered select-xs font-normal w-full max-w-xs !h-7 bg-transparent"
       @change="[field.preferences.format = $event.target.value, $emit('save')]"
     >
       <option
diff --git a/app/javascript/template_builder/fields.vue b/app/javascript/template_builder/fields.vue
index b1d1346d..01b422fc 100644
--- a/app/javascript/template_builder/fields.vue
+++ b/app/javascript/template_builder/fields.vue
@@ -48,7 +48,7 @@
       <input
         v-model="defaultFieldsSearch"
         :placeholder="t('search_field')"
-        class="input input-ghost input-xs px-0 text-base mb-2 !outline-0 !rounded bg-transparent w-full"
+        class="input input-ghost input-xs px-0 text-base mb-2 !rounded bg-transparent w-full"
       >
       <hr class="mb-2">
     </template>
@@ -137,7 +137,7 @@
       <input
         v-model="customFieldsSearch"
         :placeholder="t('search_field')"
-        class="input input-ghost input-xs px-0 text-base mb-1 !outline-0 !rounded bg-transparent w-full"
+        class="input input-ghost input-xs px-0 text-base mb-1 !rounded bg-transparent w-full"
       >
       <hr class="mb-2">
     </template>
diff --git a/app/javascript/template_builder/formula_modal.vue b/app/javascript/template_builder/formula_modal.vue
index a731519b..f91f04cc 100644
--- a/app/javascript/template_builder/formula_modal.vue
+++ b/app/javascript/template_builder/formula_modal.vue
@@ -55,7 +55,7 @@
             <textarea
               ref="textarea"
               v-model="formula"
-              class="base-textarea !rounded-xl !text-base font-mono w-full !outline-0 !ring-0 !px-3"
+              class="base-textarea !rounded-xl !text-base font-mono w-full !px-3"
               :readonly="!editable"
               required="true"
               @input="resizeTextarea"
diff --git a/app/javascript/template_builder/payment_settings.vue b/app/javascript/template_builder/payment_settings.vue
index 6a130d7f..1a036748 100644
--- a/app/javascript/template_builder/payment_settings.vue
+++ b/app/javascript/template_builder/payment_settings.vue
@@ -28,7 +28,7 @@
         <select
           v-model="field.preferences.currency"
           :placeholder="t('price')"
-          class="select select-bordered select-xs font-normal w-full max-w-xs !h-7 !outline-0"
+          class="select select-bordered select-xs font-normal w-full max-w-xs !h-7"
           @change="save"
         >
           <option
@@ -55,14 +55,14 @@
           v-if="'payment_link_id' in field.preferences"
           v-model="field.preferences.payment_link_id"
           placeholder="plink_XXXXX"
-          class="input input-bordered input-xs w-full max-w-xs h-7 !outline-0"
+          class="input input-bordered input-xs w-full max-w-xs h-7"
           @blur="save"
         >
         <input
           v-else-if="'price_id' in field.preferences"
           v-model="field.preferences.price_id"
           placeholder="Price ID: price_XXXXX"
-          class="input input-bordered input-xs w-full max-w-xs h-7 !outline-0"
+          class="input input-bordered input-xs w-full max-w-xs h-7"
           @blur="save"
         >
         <input
@@ -70,7 +70,7 @@
           type="number"
           :placeholder="t('price')"
           disabled="true"
-          class="input input-bordered input-xs w-full max-w-xs h-7 !outline-0"
+          class="input input-bordered input-xs w-full max-w-xs h-7"
           @blur="save"
         >
         <input
@@ -78,7 +78,7 @@
           v-model="field.preferences.price"
           type="number"
           :placeholder="t('price')"
-          class="input input-bordered input-xs w-full max-w-xs h-7 !outline-0"
+          class="input input-bordered input-xs w-full max-w-xs h-7"
           @blur="save"
         >
         <label