fix(InputMenu): prevent change event when selecting create item

Resolves #4664

Author: benjamincanac

src/runtime/components/InputMenu.vue

@@ -415,6 +415,13 @@ function onRemoveTag(event: any, modelValue: GetModelValue<T, VK, true>) {
   }
 }
 
+function onCreate(e: Event) {
+  e.preventDefault()
+  e.stopPropagation()
+
+  emits('create', searchTerm.value)
+}
+
 function onSelect(e: Event, item: InputMenuItem) {
   if (!isInputItem(item)) {
     return
@@ -444,7 +451,7 @@ defineExpose({
       data-slot="item"
       :class="ui.item({ class: props.ui?.item })"
       :value="searchTerm"
-      @select.prevent="emits('create', searchTerm)"
+      @select="onCreate"
     >
       <span data-slot="itemLabel" :class="ui.itemLabel({ class: props.ui?.itemLabel })">
         <slot name="create-item-label" :item="searchTerm">
@@ -520,7 +527,6 @@ defineExpose({
     ignore-filter
     @update:model-value="onUpdate"
     @update:open="onUpdateOpen"
-    @keydown.enter="$event.preventDefault()"
   >
     <ComboboxAnchor :as-child="!multiple" data-slot="base" :class="ui.base({ class: props.ui?.base })">
       <TagsInputRoot
@@ -557,7 +563,7 @@ defineExpose({
             :placeholder="placeholder"
             data-slot="tagsInput"
             :class="ui.tagsInput({ class: props.ui?.tagsInput })"
-            @keydown.enter.prevent
+            @change.stop
           />
         </ComboboxInput>
       </TagsInputRoot>
@@ -573,6 +579,7 @@ defineExpose({
         :required="required"
         @blur="onBlur"
         @focus="onFocus"
+        @change.stop
         @update:model-value="searchTerm = $event"
       />
 

src/runtime/components/SelectMenu.vue

@@ -397,6 +397,13 @@ function onUpdateOpen(value: boolean) {
   }
 }
 
+function onCreate(e: Event) {
+  e.preventDefault()
+  e.stopPropagation()
+
+  emits('create', searchTerm.value)
+}
+
 function onSelect(e: Event, item: SelectMenuItem) {
   if (!isSelectItem(item)) {
     return
@@ -426,7 +433,7 @@ defineExpose({
       data-slot="item"
       :class="ui.item({ class: props.ui?.item })"
       :value="searchTerm"
-      @select.prevent="emits('create', searchTerm)"
+      @select="onCreate"
     >
       <span data-slot="itemLabel" :class="ui.itemLabel({ class: props.ui?.itemLabel })">
         <slot name="create-item-label" :item="searchTerm">
@@ -543,6 +550,7 @@ defineExpose({
               v-bind="searchInputProps"
               data-slot="input"
               :class="ui.input({ class: props.ui?.input })"
+              @change.stop
             />
           </ComboboxInput>