fix(Input/SelectMenu): handle file type and change events (#1570)

nuxt · Mar 27, 2024 · 878f707 · 878f707
1 parent bd8118c
commit 878f707
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 18 deletions.
diff --git a/src/runtime/components/forms/Input.vue b/src/runtime/components/forms/Input.vue
@@ -205,16 +205,19 @@ export default defineComponent({
     }
 
     const onChange = (event: Event) => {
-      const value = (event.target as HTMLInputElement).value
-      emit('change', value)
-
-      if (modelModifiers.value.lazy) {
-        updateInput(value)
-      }
-
-      // Update trimmed input so that it has same behavior as native input https://github.com/vuejs/core/blob/5ea8a8a4fab4e19a71e123e4d27d051f5e927172/packages/runtime-dom/src/directives/vModel.ts#L63
-      if (modelModifiers.value.trim) {
-        (event.target as HTMLInputElement).value = value.trim()
+      if (props.type === 'file') {
+        const value = (event.target as HTMLInputElement).files
+        emit('change', value)
+      } else {
+        const value = (event.target as HTMLInputElement).value
+        emit('change', value)
+        if (modelModifiers.value.lazy) {
+          updateInput(value)
+        }
+        // Update trimmed input so that it has same behavior as native input https://github.com/vuejs/core/blob/5ea8a8a4fab4e19a71e123e4d27d051f5e927172/packages/runtime-dom/src/directives/vModel.ts#L63
+        if (modelModifiers.value.trim) {
+          (event.target as HTMLInputElement).value = value.trim()
+        }
       }
     }
 

diff --git a/src/runtime/components/forms/SelectMenu.vue b/src/runtime/components/forms/SelectMenu.vue
@@ -63,7 +63,7 @@
               autofocus
               autocomplete="off"
               :class="uiMenu.input"
-              @change="onChange"
+              @change="onQueryChange"
             />
             <component
               :is="searchable ? 'HComboboxOption' : 'HListboxOption'"
@@ -505,14 +505,13 @@ export default defineComponent({
       }
     })
 
-    function onUpdate (event: any) {
-      emit('update:modelValue', event)
-    }
-
-    function onChange (event: any) {
-      emit('change', (event.target as HTMLInputElement).value)
+    function onUpdate (value: any) {
+      emit('update:modelValue', value)
+      emit('change', value)
       emitFormChange()
+    }
 
+    function onQueryChange (event: any) {
       query.value = event.target.value
     }
 
@@ -547,7 +546,7 @@ export default defineComponent({
       // eslint-disable-next-line vue/no-dupe-keys
       query,
       onUpdate,
-      onChange
+      onQueryChange
     }
   }
 })