From 12c451558f7b51dcfe5fed857da696139e1d2c77 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=92=D0=B8=D0=BA=D1=82=D0=BE=D1=80=D0=B8=D1=8F=20=D0=93?=
 =?UTF-8?q?=D1=80=D0=B8=D0=B3=D0=BE=D1=80=D1=8C=D0=B5=D0=B2=D0=BD=D0=B0=20?=
 =?UTF-8?q?=D0=9A=D0=B0=D1=80=D0=BF=D0=BE=D0=B2=D0=B0?= <vkarpova@stsoft.ru>
Date: Thu, 7 Dec 2023 17:41:28 +0300
Subject: [PATCH] fix: first validation on leave, not type + number value for
 input

---
 src/components/BuiInput/BuiInput.vue   | 29 ++++++++++++++++++--------
 src/components/BuiSelect/BuiSelect.vue |  9 ++++++--
 2 files changed, 27 insertions(+), 11 deletions(-)

diff --git a/src/components/BuiInput/BuiInput.vue b/src/components/BuiInput/BuiInput.vue
index 06d6c42..c135aeb 100644
--- a/src/components/BuiInput/BuiInput.vue
+++ b/src/components/BuiInput/BuiInput.vue
@@ -17,8 +17,8 @@
         :disabled="disabled"
         :required="required"
         :class="[inputClasses, $slots.prefix ? 'pl-10' : '']"
-        @focusin="emit('focus')"
-        @blur="emit('blur')"
+        @focusin="handleFocus"
+        @blur="handleBlur"
         :placeholder="placeholder"
       />
       <div v-if="$slots.suffix" class="absolute right-2.5 bottom-2.5">
@@ -43,7 +43,7 @@ type ValidationStatus = 'success' | 'error'
 interface InputProps {
   disabled?: boolean
   label?: string
-  value?: string
+  value?: string | number
   required?: boolean
   validationStatus?: ValidationStatus | null
   placeholder?: string | undefined
@@ -70,6 +70,23 @@ const model = computed({
 })
 
 const isDirty = ref(false)
+const isInFocus = ref(false)
+function handleBlur() {
+  isInFocus.value = false
+  isDirty.value = true
+  emit('blur')
+}
+
+function handleFocus() {
+  isInFocus.value = true
+  emit('focus')
+}
+
+watch(model, (newValue, oldValue) => {
+  if (newValue !== oldValue && !isDirty.value && !isInFocus.value) {
+    isDirty.value = true
+  }
+})
 
 const inputClasses = computed(() =>
   twMerge(
@@ -96,10 +113,4 @@ const validationWrapperClasses = computed(() =>
     (props.validationStatus === null || (!props.hasForcedValidation && !isDirty.value)) && 'hidden'
   )
 )
-
-watch(model, (newValue, oldValue) => {
-  if (newValue !== oldValue && !isDirty.value) {
-    isDirty.value = true
-  }
-})
 </script>
diff --git a/src/components/BuiSelect/BuiSelect.vue b/src/components/BuiSelect/BuiSelect.vue
index 7dff300..4119338 100644
--- a/src/components/BuiSelect/BuiSelect.vue
+++ b/src/components/BuiSelect/BuiSelect.vue
@@ -6,7 +6,7 @@
     </span>
 
     <span class="relative flex">
-      <select v-model="model" :disabled="disabled" :class="selectClasses">
+      <select v-model="model" :disabled="disabled" :class="selectClasses" @blur="handleBlur">
         <option disabled selected value="">
           {{ placeholder }}
         </option>
@@ -59,7 +59,7 @@ const props = withDefaults(defineProps<InputProps>(), {
   hasForcedValidation: false,
   validationStatus: null
 })
-const emit = defineEmits(['input'])
+const emit = defineEmits(['input', 'blur'])
 
 const model = computed({
   get() {
@@ -71,6 +71,11 @@ const model = computed({
 })
 
 const isDirty = ref(false)
+function handleBlur() {
+  isDirty.value = true
+  emit('blur')
+}
+
 watch(model, (newValue, oldValue) => {
   if (newValue !== oldValue && !isDirty.value) {
     isDirty.value = true