From a2114c587435af901d5bbea047a297169bc7abfb Mon Sep 17 00:00:00 2001
From: Romain Hamel <rom.hml@gmail.com>
Date: Mon, 10 Jun 2024 10:45:54 +0200
Subject: [PATCH] fix(Form): inconsistent validation events for `InputMenu` and
 `Select` (#123)

Co-authored-by: Benjamin Canac <canacb1@gmail.com>
---
 src/runtime/components/InputMenu.vue | 1 +
 src/runtime/components/Select.vue    | 7 ++++++-
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/runtime/components/InputMenu.vue b/src/runtime/components/InputMenu.vue
index ef45a6ef..c0c7c73a 100644
--- a/src/runtime/components/InputMenu.vue
+++ b/src/runtime/components/InputMenu.vue
@@ -193,6 +193,7 @@ onMounted(() => {
         v-slot="{ modelValue: tags }: { modelValue: AcceptableValue[] }"
         :model-value="(modelValue as string[])"
         :disabled="disabled"
+        @blur="emitFormBlur()"
         delimiter=""
         as-child
       >
diff --git a/src/runtime/components/Select.vue b/src/runtime/components/Select.vue
index 031a840f..04e40311 100644
--- a/src/runtime/components/Select.vue
+++ b/src/runtime/components/Select.vue
@@ -83,7 +83,7 @@ const appConfig = useAppConfig()
 const rootProps = useForwardPropsEmits(reactivePick(props, 'modelValue', 'defaultValue', 'open', 'defaultOpen', 'disabled', 'autocomplete', 'required'), emits)
 const contentProps = toRef(() => defu(props.content, { side: 'bottom', sideOffset: 8, position: 'popper' }) as SelectContentProps)
 
-const { emitFormChange, size: formGroupSize, color, id, name, disabled } = useFormField<InputProps>(props)
+const { emitFormChange, emitFormBlur, size: formGroupSize, color, id, name, disabled } = useFormField<InputProps>(props)
 const { orientation, size: buttonGroupSize } = useButtonGroup<InputProps>(props)
 const { isLeading, isTrailing, leadingIconName, trailingIconName } = useComponentIcons(toRef(() => defu(props, { trailingIcon: appConfig.ui.icons.chevronDown })))
 
@@ -100,6 +100,10 @@ const ui = computed(() => tv({ extend: select, slots: props.ui })({
 }))
 
 const groups = computed(() => props.items?.length ? (Array.isArray(props.items[0]) ? props.items : [props.items]) as SelectItem[][] : [])
+
+function onUpdateOpen(value: boolean) {
+  if (!value) emitFormBlur()
+}
 </script>
 
 <template>
@@ -110,6 +114,7 @@ const groups = computed(() => props.items?.length ? (Array.isArray(props.items[0
     :name="name"
     :disabled="disabled"
     @update:model-value="emitFormChange()"
+    @update:open="onUpdateOpen"
   >
     <SelectTrigger :class="ui.base({ class: props.class })">
       <span v-if="isLeading || !!slots.leading" :class="ui.leading()">