From bf95096bfe4c5eee3fe8d5a55dc885d9752b5bab Mon Sep 17 00:00:00 2001
From: Favour Olayinka <csskfaves@gmail.com>
Date: Tue, 12 Mar 2024 18:16:37 +0100
Subject: [PATCH] fix: hide border on error (#330)

Co-authored-by: Julien Nahum <julien@nahum.net>
---
 client/components/forms/CodeInput.client.vue         | 2 +-
 client/components/forms/FlatSelectInput.vue          | 2 +-
 client/components/forms/PhoneInput.vue               | 2 +-
 client/components/forms/RichTextAreaInput.client.vue | 2 +-
 client/components/forms/SignatureInput.vue           | 2 +-
 client/components/forms/TextAreaInput.vue            | 2 +-
 client/components/forms/TextInput.vue                | 2 +-
 client/components/forms/components/VSelect.vue       | 2 +-
 8 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/client/components/forms/CodeInput.client.vue b/client/components/forms/CodeInput.client.vue
index 4d4a0090..50704574 100644
--- a/client/components/forms/CodeInput.client.vue
+++ b/client/components/forms/CodeInput.client.vue
@@ -11,7 +11,7 @@
     </template>
 
     <div
-      :class="[theme.CodeInput.input,{ '!ring-red-500 !ring-2': hasError, '!cursor-not-allowed !bg-gray-200':disabled }]"
+      :class="[theme.CodeInput.input,{ '!ring-red-500 !ring-2 !border-transparent': hasError, '!cursor-not-allowed !bg-gray-200':disabled }]"
     >
       <codemirror :id="id?id:name" v-model="compVal" :disabled="disabled?true:null"
                   :extensions="extensions"
diff --git a/client/components/forms/FlatSelectInput.vue b/client/components/forms/FlatSelectInput.vue
index 4965f9d2..1e645390 100644
--- a/client/components/forms/FlatSelectInput.vue
+++ b/client/components/forms/FlatSelectInput.vue
@@ -8,7 +8,7 @@
 
     <Loader v-if="loading" key="loader" class="h-6 w-6 text-nt-blue mx-auto" />
     <div v-for="(option, index) in options" v-else :key="option[optionKey]" role="button"
-         :class="[theme.default.input,'cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-900 flex',{ 'mb-2': index !== options.length,'!ring-red-500 !ring-2': hasError, '!cursor-not-allowed !bg-gray-200':disabled }]"
+         :class="[theme.default.input,'cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-900 flex',{ 'mb-2': index !== options.length,'!ring-red-500 !ring-2 !border-transparent': hasError, '!cursor-not-allowed !bg-gray-200':disabled }]"
          @click="onSelect(option[optionKey])"
     >
       <p class="flex-grow">
diff --git a/client/components/forms/PhoneInput.vue b/client/components/forms/PhoneInput.vue
index ddd7f006..ca53d898 100644
--- a/client/components/forms/PhoneInput.vue
+++ b/client/components/forms/PhoneInput.vue
@@ -28,7 +28,7 @@
         </template>
       </v-select>
       <input v-model="inputVal" type="text" class="inline-flex-grow !border-l-0 !rounded-l-none" :disabled="disabled?true:null"
-             :class="[theme.default.input, { '!ring-red-500 !ring-2': hasError, '!cursor-not-allowed !bg-gray-200': disabled }]"
+             :class="[theme.default.input, { '!ring-red-500 !ring-2 !border-transparent': hasError, '!cursor-not-allowed !bg-gray-200': disabled }]"
              :placeholder="placeholder" :style="inputStyle" @input="onInput"
       >
     </div>
diff --git a/client/components/forms/RichTextAreaInput.client.vue b/client/components/forms/RichTextAreaInput.client.vue
index ccd1d0c0..e3b609c4 100644
--- a/client/components/forms/RichTextAreaInput.client.vue
+++ b/client/components/forms/RichTextAreaInput.client.vue
@@ -7,7 +7,7 @@
     </template>
 
     <vue-editor :id="id?id:name" ref="editor" v-model="compVal" :disabled="disabled?true:null"
-                :placeholder="placeholder" :class="[{ '!ring-red-500 !ring-2': hasError, '!cursor-not-allowed !bg-gray-200':disabled }, theme.RichTextAreaInput.input]"
+                :placeholder="placeholder" :class="[{ '!ring-red-500 !ring-2 !border-transparent': hasError, '!cursor-not-allowed !bg-gray-200':disabled }, theme.RichTextAreaInput.input]"
                 :editor-toolbar="editorToolbar" class="rich-editor resize-y"
                 :style="inputStyle"
     />
diff --git a/client/components/forms/SignatureInput.vue b/client/components/forms/SignatureInput.vue
index c213a9dd..cda0ca9d 100644
--- a/client/components/forms/SignatureInput.vue
+++ b/client/components/forms/SignatureInput.vue
@@ -7,7 +7,7 @@
     </template>
 
     <VueSignaturePad ref="signaturePad"
-                     :class="[theme.default.input,{ '!ring-red-500 !ring-2': hasError, '!cursor-not-allowed !bg-gray-200':disabled }]"
+                     :class="[theme.default.input,{ '!ring-red-500 !ring-2 !border-transparent': hasError, '!cursor-not-allowed !bg-gray-200':disabled }]"
                      height="150px"
                      :name="name"
                      :options="{ onEnd }"
diff --git a/client/components/forms/TextAreaInput.vue b/client/components/forms/TextAreaInput.vue
index 757d7e87..8cc5f177 100644
--- a/client/components/forms/TextAreaInput.vue
+++ b/client/components/forms/TextAreaInput.vue
@@ -7,7 +7,7 @@
     </template>
 
     <textarea :id="id?id:name" v-model="compVal" :disabled="disabled?true:null"
-              :class="[theme.default.input,{ '!ring-red-500 !ring-2': hasError, '!cursor-not-allowed !bg-gray-200':disabled }]"
+              :class="[theme.default.input,{ '!ring-red-500 !ring-2 !border-transparent': hasError, '!cursor-not-allowed !bg-gray-200':disabled }]"
               class="resize-y"
               :name="name" :style="inputStyle"
               :placeholder="placeholder"
diff --git a/client/components/forms/TextInput.vue b/client/components/forms/TextInput.vue
index da7d6197..2ab41a31 100644
--- a/client/components/forms/TextInput.vue
+++ b/client/components/forms/TextInput.vue
@@ -10,7 +10,7 @@
            :type="nativeType" :autocomplete="autocomplete"
            :pattern="pattern"
            :style="inputStyle"
-           :class="[theme.default.input, { '!ring-red-500 !ring-2': hasError, '!cursor-not-allowed !bg-gray-200': disabled }]"
+           :class="[theme.default.input, { '!ring-red-500 !ring-2 !border-transparent': hasError, '!cursor-not-allowed !bg-gray-200': disabled }]"
            :name="name" :accept="accept"
            :placeholder="placeholder" :min="min" :max="max" :maxlength="maxCharLimit"
            @change="onChange" @keydown.enter.prevent="onEnterPress"
diff --git a/client/components/forms/components/VSelect.vue b/client/components/forms/components/VSelect.vue
index 96a96caa..288b812b 100644
--- a/client/components/forms/components/VSelect.vue
+++ b/client/components/forms/components/VSelect.vue
@@ -4,7 +4,7 @@
       <button type="button" aria-haspopup="listbox" aria-expanded="true" aria-labelledby="listbox-label"
               class="cursor-pointer"
               :style="inputStyle"
-              :class="[theme.SelectInput.input,{'py-2': !multiple || loading,'py-1': multiple, '!ring-red-500 !ring-2': hasError, '!cursor-not-allowed !bg-gray-200': disabled}, inputClass]"
+              :class="[theme.SelectInput.input,{'py-2': !multiple || loading,'py-1': multiple, '!ring-red-500 !ring-2 !border-transparent': hasError, '!cursor-not-allowed !bg-gray-200': disabled}, inputClass]"
               @click="toggleDropdown"
       >
         <div :class="{'h-6': !multiple, 'min-h-8': multiple && !loading}">