feat: use handle blur correct

Author: Kevin Szymura

src/components/PrimeAutoComplete.vue

@@ -22,6 +22,10 @@ function handleInput(e: any) {
   context?.node.input(props.context?._value)
 }
 
+const handleBlur = (event: Event) => {
+  context?.handlers.blur(event);
+}
+
 const styleClass = computed(() => (context?.state.validationVisible && !context?.state.valid) ? `${attrs.value?.class} p-invalid` : attrs.value?.class)
 </script>
 
@@ -37,6 +41,7 @@ const styleClass = computed(() => (context?.state.validationVisible && !context?
       :suggestions="suggestions"
       @complete="search"
       @change="handleInput"
+      @blur="handleBlur"
     />
   </div>
 </template>

src/components/PrimeCheckbox.vue

@@ -16,6 +16,10 @@ function handleInput(e: any) {
   context?.node.input(props.context?._value)
 }
 
+function handleBlur(e: Event) {
+  context?.handlers.blur(e)
+}
+
 const styleClass = computed(() => (context?.state.validationVisible && !context?.state.valid) ? `${attrs.value?.class} p-invalid` : attrs.value?.class)
 </script>
 
@@ -32,6 +36,7 @@ const styleClass = computed(() => (context?.state.validationVisible && !context?
       :input-class="styleClass"
       :binary="attrs.binary ?? true"
       @change="handleInput"
+      @blur="handleBlur"
     />
     <span v-if="context.attrs.labelRight" class="formkit-prime-right">{{ context.attrs.labelRight }}</span>
   </div>

src/components/PrimeInputMask.vue

@@ -12,9 +12,9 @@ const props = defineProps({
 const context = props.context
 const attrs = computed(() => context?.attrs)
 
-function handleInput(e: any) {
+function handleInput(e: Event) {
   context?.node.input(props.context?._value)
-  context?.handlers.blur(props.context?._value)
+  context?.handlers.blur(e)
 }
 const styleClass = computed(() => (context?.state.validationVisible && !context?.state.valid) ? `${attrs.value?.class} p-invalid` : attrs.value?.class)
 </script>

src/components/PrimeInputSwitch.vue

@@ -15,6 +15,11 @@ const attrs = computed(() => context?.attrs)
 function handleInput(e: any) {
   context?.node.input(props.context?._value)
 }
+
+function handleBlur(e: Event) {
+  context?.handlers.blur(e)
+}
+
 const styleClass = computed(() => (context?.state.validationVisible && !context?.state.valid) ? `${attrs.value?.class} p-invalid` : attrs.value?.class)
 </script>
 
@@ -30,6 +35,7 @@ const styleClass = computed(() => (context?.state.validationVisible && !context?
       :input-style="attrs.style"
       :input-class="styleClass"
       @change="handleInput"
+      @blur='handleBlur'
     />
     <span v-if="context.attrs.labelRight" class="formkit-prime-right">{{ context.attrs.labelRight }}</span>
   </div>

src/components/PrimeListbox.vue

@@ -16,6 +16,10 @@ function handleInput(e: any) {
   context?.node.input(props.context?._value)
 }
 
+function handleBlur(e: Event) {
+  context?.handlers.blur(e)
+}
+
 const styleClass = computed(() => (context?.state.validationVisible && !context?.state.valid) ? `${attrs.value?.class} p-invalid` : attrs.value?.class)
 </script>
 
@@ -30,6 +34,7 @@ const styleClass = computed(() => (context?.state.validationVisible && !context?
       :class="styleClass"
       :unstyled="attrs.unstyled ?? false"
       @change="handleInput"
+      @blur="handleBlur"
     />
   </div>
 </template>

src/components/PrimePassword.vue

@@ -12,8 +12,8 @@ const props = defineProps({
 const context = props.context
 const attrs = computed(() => context?.attrs)
 
-function handleBlur(e: any) {
-  context?.handlers.blur(e.target.value)
+function handleBlur(e: Event) {
+  context?.handlers.blur(e)
 }
 
 function handleInput(e: any) {

src/components/PrimeRadioButton.vue

@@ -16,6 +16,10 @@ function handleChange(e: any) {
   context?.node.input(props.context?._value)
 }
 
+function handleBlur(e: Event) {
+  context?.handlers.blur(e)
+}
+
 const styleClass = computed(() => (context?.state.validationVisible && !context?.state.valid) ? `${attrs.value?.class} p-invalid` : attrs.value?.class)
 </script>
 
@@ -33,6 +37,7 @@ const styleClass = computed(() => (context?.state.validationVisible && !context?
         :input-class="styleClass"
         @click="handleChange"
         @change="handleChange"
+        @blur="handleChange"
       />
       <label :for="option.value">{{ option.label }}</label>
     </div>

src/components/PrimeRating.vue

@@ -16,6 +16,10 @@ function handleInput(e: any) {
   context?.node.input(props.context?._value)
 }
 
+function handleBlur(e: Event) {
+  context?.handlers.blur(e)
+}
+
 const styleClass = computed(() => (context?.state.validationVisible && !context?.state.valid) ? `${attrs.value?.class} p-invalid` : attrs.value?.class)
 </script>
 
@@ -32,6 +36,7 @@ const styleClass = computed(() => (context?.state.validationVisible && !context?
       :off-icon="attrs.offIcon ?? 'pi pi-star'"
       :cancel="attrs.cancel ?? false"
       @change="handleInput"
+      @blur="handleBlur"
     />
   </div>
 </template>

src/components/PrimeSelectButton.vue

@@ -16,6 +16,10 @@ function handleChange(e: any) {
   context?.node.input(props.context?._value)
 }
 
+function handleBlur(e: Event) {
+  context?.handlers.blur(e)
+}
+
 const styleClass = computed(() => (context?.state.validationVisible && !context?.state.valid) ? `${attrs.value?.class} p-invalid` : attrs.value?.class)
 </script>
 
@@ -29,6 +33,7 @@ const styleClass = computed(() => (context?.state.validationVisible && !context?
       :style="attrs.style"
       :class="styleClass"
       @change="handleChange"
+      @blur="handleBlur"
     />
   </div>
 </template>

src/components/PrimeSlider.vue

@@ -16,6 +16,11 @@ function handleInput(e: any) {
   context?.node.input(e)
   context?.handlers.blur(e)
 }
+
+function handleBlur(e: Event) {
+  context?.handlers.blur(e)
+}
+
 const styleClass = computed(() => (context?.state.validationVisible && !context?.state.valid) ? `${attrs.value?.class} p-invalid` : attrs.value?.class)
 </script>
 
@@ -29,6 +34,7 @@ const styleClass = computed(() => (context?.state.validationVisible && !context?
       :style="attrs.style"
       :class="styleClass"
       @change="handleInput"
+      @blur="handleBlur"
     />
   </div>
 </template>

src/components/PrimeTextarea.vue

@@ -12,8 +12,8 @@ const props = defineProps({
 const context = props.context
 const attrs = computed(() => context?.attrs)
 
-function handleBlur(e: any) {
-  context?.handlers.blur(e.target.value)
+function handleBlur(e: Event) {
+  context?.handlers.blur(e)
 }
 
 function handleInput(e: any) {

src/components/PrimeToggleButton.vue

@@ -15,6 +15,11 @@ const attrs = computed(() => context?.attrs)
 function handleChange(e: any) {
   context?.node.input(props.context?._value)
 }
+
+function handleBlur(e: Event) {
+  context?.handlers.blur(e)
+}
+
 const styleClass = computed(() => (context?.state.validationVisible && !context?.state.valid) ? `${attrs.value?.class} p-invalid` : attrs.value?.class)
 </script>
 
@@ -31,6 +36,7 @@ const styleClass = computed(() => (context?.state.validationVisible && !context?
       :on-icon="context.onIcon ?? 'pi pi-check'"
       :off-icon="context.offIcon ?? 'pi pi-times'"
       @change="handleChange"
+      @blur="handleBlur"
     />
   </div>
 </template>

src/components/PrimeTreeSelect.vue

@@ -16,6 +16,10 @@ function handleInput(e: any) {
   context?.node.input(props.context?._value)
 }
 
+function handleBlur(e: Event) {
+  context?.handlers.blur(e)
+}
+
 const styleClass = computed(() => (context?.state.validationVisible && !context?.state.valid) ? `${attrs.value?.class} p-invalid` : attrs.value?.class)
 </script>
 
@@ -30,6 +34,7 @@ const styleClass = computed(() => (context?.state.validationVisible && !context?
       :input-style="attrs.style"
       :input-class="styleClass"
       @change="handleInput"
+      @blur="handleBlur"
     />
   </div>
 </template>

src/components/PrimeTriStateCheckbox.vue

@@ -16,6 +16,10 @@ function handleChange(e: any) {
   context?.node.input(props.context?._value)
 }
 
+function handleBlur(e: Event) {
+  context?.handlers.blur(e)
+}
+
 const styleClass = computed(() => (context?.state.validationVisible && !context?.state.valid) ? `${attrs.value?.class} p-invalid` : attrs.value?.class)
 </script>
 
@@ -31,6 +35,7 @@ const styleClass = computed(() => (context?.state.validationVisible && !context?
       :input-style="attrs.style"
       :input-class="styleClass"
       @change="handleChange"
+      @blur="handleBlur"
     />
     <span v-if="context.attrs.labelRight" class="formkit-prime-right">{{ context.attrs.labelRight }}</span>
   </div>

src/formkit/PrimeCalendar.vue

@@ -22,7 +22,7 @@ function handleSelect(e: any) {
 }
 
 function handleBlur(e: CalendarBlurEvent) {
-  context?.handlers.blur(e.value)
+  context?.handlers.blur(e.originalEvent)
 }
 
 function handleClearClick() {

src/formkit/PrimeDropdown.vue

@@ -12,8 +12,8 @@ const props = defineProps({
 const context = props.context
 const attrs = computed(() => context?.attrs)
 
-function handleBlur(e: any) {
-  context?.handlers.blur(e.value)
+function handleBlur(e: Event) {
+  context?.handlers.blur(e)
 }
 function handleInput(e: any) {
   context?.node.input(e.value)

src/formkit/PrimeInputNumber.vue

@@ -1,6 +1,7 @@
 <script setup lang='ts'>
 import { type PropType, computed } from 'vue';
 import { type FormKitFrameworkContext } from '@formkit/core';
+import { InputNumberBlurEvent } from 'primevue/inputnumber'
 
 const props = defineProps({
   context: {
@@ -12,8 +13,8 @@ const props = defineProps({
 const context = props.context
 const attrs = computed(() => context?.attrs)
 
-function handleBlur(e: any) {
-  context?.handlers.blur(e.value)
+function handleBlur(e: InputNumberBlurEvent) {
+  context?.handlers.blur(e.originalEvent)
 }
 
 function handleInput(e: any) {

src/formkit/PrimeInputText.vue

@@ -29,8 +29,8 @@ function spanClass() {
   return result
 }
 
-function handleBlur(e: any) {
-  context?.handlers.blur(e.target.value)
+function handleBlur(e: Event) {
+  context?.handlers.blur(e)
 }
 
 function handleInput(e: any) {

src/formkit/PrimeListbox.vue

@@ -16,6 +16,10 @@ function handleInput(e: any) {
   context?.node.input(props.context?._value)
 }
 
+function handleBlur(e: Event) {
+  context?.handlers.blur(e)
+}
+
 const styleClass = computed(() => (context?.state.validationVisible && !context?.state.valid) ? `${attrs.value?.class} p-invalid` : attrs.value?.class)
 </script>
 
@@ -46,6 +50,7 @@ const styleClass = computed(() => (context?.state.validationVisible && !context?
       :pt-options="attrs.ptOptions"
       :unstyled="attrs.unstyled ?? false"
       @change="handleInput"
+      @blur='handleBlur'
     />
   </div>
 </template>

src/formkit/PrimeMultiSelect.vue

@@ -16,6 +16,10 @@ function handleChange(e: any) {
   context?.node.input(props.context?._value)
 }
 
+function handleBlur(e: Event) {
+  context?.handlers.blur(e)
+}
+
 const styleClass = computed(() => (context?.state.validationVisible && !context?.state.valid) ? `${attrs.value?.class} p-invalid` : attrs.value?.class)
 </script>
 
@@ -68,6 +72,7 @@ const styleClass = computed(() => (context?.state.validationVisible && !context?
       :pt-options="attrs.ptOptions"
       :unstyled="attrs.unstyled ?? false"
       @change="handleChange"
+      @blur="handleBlur"
     />
   </div>
 </template>