fix: parse native number fields closes #4313

Author: logaretm

.changeset/warm-dolls-attack.md

@@ -0,0 +1,5 @@
+---
+'vee-validate': patch
+---
+
+fix: parse native number fields closes #4313

packages/vee-validate/src/utils/events.ts

@@ -1,6 +1,14 @@
 import { hasCheckedAttr, isNativeMultiSelect, isNativeSelect, isEvent } from './assertions';
 import { getBoundValue, hasValueBinding } from './vnode';
 
+function parseInputValue(el: HTMLInputElement) {
+  if (el.type === 'number') {
+    return el.valueAsNumber;
+  }
+
+  return el.value;
+}
+
 export function normalizeEventValue(value: Event | unknown): unknown {
   if (!isEvent(value)) {
     return value;
@@ -33,5 +41,5 @@ export function normalizeEventValue(value: Event | unknown): unknown {
     return selectedOption ? getBoundValue(selectedOption) : input.value;
   }
 
-  return input.value;
+  return parseInputValue(input);
 }

packages/vee-validate/tests/useField.spec.ts

@@ -871,4 +871,26 @@ describe('useField()', () => {
     expect(validator).toHaveBeenCalledTimes(2);
     expect(field.errorMessage.value).toBe(undefined);
   });
+
+  test('handleChange parses input[type=number] value', async () => {
+    let field!: FieldContext;
+
+    mountWithHoc({
+      setup() {
+        field = useField('field', undefined);
+        const { handleChange } = field;
+
+        return {
+          handleChange,
+        };
+      },
+      template: `<input type="number" @change="handleChange" />`,
+    });
+
+    await flushPromises();
+    const input = document.querySelector('input') as HTMLInputElement;
+    setValue(input, '123');
+    await flushPromises();
+    expect(field.value.value).toBe(123);
+  });
 });