fix: respect model modifiers when emitting the value closes #4333

logaretm · Jun 28, 2023 · c3698f0 · c3698f0
1 parent 81125a0
commit c3698f0
Show file tree

Hide file tree

Showing 4 changed files with 56 additions and 4 deletions.
diff --git a/.changeset/healthy-peaches-poke.md b/.changeset/healthy-peaches-poke.md
@@ -0,0 +1,5 @@
+---
+'vee-validate': patch
+---
+
+fix: respect model modifiers when emitting the value closes #4333
diff --git a/packages/vee-validate/src/useField.ts b/packages/vee-validate/src/useField.ts
@@ -263,8 +263,10 @@ function _useField<TValue = unknown>(
     validateValidStateOnly();
   }
 
+  const vm = getCurrentInstance();
+
   function setValue(newValue: TValue, shouldValidate = true) {
-    value.value = newValue;
+    value.value = vm && syncVModel ? applyModelModifiers<TValue>(newValue, vm.props.modelModifiers) : newValue;
     const validateFn = shouldValidate ? validateWithStateMutation : validateValidStateOnly;
     validateFn();
   }
@@ -583,7 +585,7 @@ function useVModel<TValue = unknown>({ prop, value, handleChange }: ModelOpts<TV
       }
 
       const newValue = (propValue as any) === IS_ABSENT ? undefined : propValue;
-      if (isEqual(newValue, applyModelModifiers(value.value, vm.props.modelModifiers))) {
+      if (isEqual(newValue, value.value)) {
         return;
       }
 

diff --git a/packages/vee-validate/src/utils/common.ts b/packages/vee-validate/src/utils/common.ts
@@ -234,13 +234,13 @@ export function debounceAsync<TFunction extends (...args: any) => Promise<any>,
   };
 }
 
-export function applyModelModifiers(value: unknown, modifiers: unknown) {
+export function applyModelModifiers<TValue = unknown>(value: TValue, modifiers: unknown): TValue {
   if (!isObject(modifiers)) {
     return value;
   }
 
   if (modifiers.number) {
-    return toNumber(value as string);
+    return toNumber(value as string) as TValue;
   }
 
   return value;

diff --git a/packages/vee-validate/tests/useField.spec.ts b/packages/vee-validate/tests/useField.spec.ts
@@ -637,6 +637,51 @@ describe('useField()', () => {
     expect(input?.value).toBe('test');
   });
 
+  // #4333
+  test('should emit modified values with model modifiers being applied as a prop', async () => {
+    const model = ref('');
+    const InputComponent = defineComponent({
+      props: {
+        modelValue: String,
+        modelModifiers: null,
+      },
+      setup() {
+        const { value, errorMessage } = useField('field', undefined, { syncVModel: true });
+
+        return {
+          value,
+          errorMessage,
+        };
+      },
+      template: `
+        <input v-model="value" />
+      `,
+    });
+
+    const onModelUpdated = vi.fn();
+
+    mountWithHoc({
+      components: {
+        InputComponent,
+      },
+      setup() {
+        return {
+          onModelUpdated,
+          model,
+        };
+      },
+      template: `
+      <InputComponent :model-value="model" @update:model-value="onModelUpdated" :model-modifiers="{ number: true }" />
+    `,
+    });
+
+    const input = document.querySelector('input');
+
+    setValue(input as any, '123');
+    await flushPromises();
+    expect(onModelUpdated).toHaveBeenLastCalledWith(123);
+  });
+
   test('can disable model events', async () => {
     const model = ref('');
     const InputComponent = defineComponent({