fix: avoid inserting value binding for file type inputs closes #3760

Author: logaretm

packages/vee-validate/src/Field.ts

@@ -189,13 +189,11 @@ const FieldImpl = defineComponent({
 
       if (hasCheckedAttr(ctx.attrs.type) && checked) {
         attrs.checked = checked.value;
-      } else {
-        attrs.value = value.value;
       }
 
       const tag = resolveTag(props, ctx);
       if (shouldHaveValueBinding(tag, ctx.attrs)) {
-        delete attrs.value;
+        attrs.value = value.value;
       }
 
       return attrs;

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

@@ -83,7 +83,7 @@ export function isNativeMultiSelectNode(tag: string, attrs: Record<string, unkno
  * For multi-selects because the value binding will reset the value
  */
 export function shouldHaveValueBinding(tag: string, attrs: Record<string, unknown>) {
-  return isNativeMultiSelectNode(tag, attrs) || isFileInputNode(tag, attrs);
+  return !isNativeMultiSelectNode(tag, attrs) && attrs.type !== 'file' && !hasCheckedAttr(attrs.type);
 }
 
 export function isFormSubmitEvent(evt: unknown): evt is Event & { target: HTMLFormElement } {

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

@@ -1165,4 +1165,47 @@ describe('<Field />', () => {
     expect(error.textContent).toBe('');
     expect(input.value).toBe('');
   });
+
+  test('should have correct field object binding properties based on file type', async () => {
+    const textualType = jest.fn();
+    const fileType = jest.fn();
+    const checkboxType = jest.fn();
+    const radioType = jest.fn();
+
+    mountWithHoc({
+      template: `
+      <div>
+        <Field name="text" v-slot="{ field }">
+          {{ textualType(field) }}
+        </Field>
+        <Field name="file" type="file" v-slot="{ field }">
+          {{ fileType(field) }}
+        </Field>
+        <Field name="checkbox" type="checkbox" v-slot="{ field }">
+          {{ checkboxType(field) }}
+        </Field>
+        <Field name="radio" type="radio" v-slot="{ field }">
+          {{ radioType(field) }}
+        </Field>
+      </div>
+    `,
+      setup() {
+        return {
+          textualType,
+          fileType,
+          checkboxType,
+          radioType,
+        };
+      },
+    });
+
+    await flushPromises();
+    const lastCallOf = (fn: ReturnType<typeof jest.fn>) => fn.mock.calls[fn.mock.calls.length - 1][0];
+    expect(lastCallOf(textualType)).toHaveProperty('value');
+    expect(lastCallOf(fileType)).not.toHaveProperty('value');
+    expect(lastCallOf(checkboxType)).toHaveProperty('checked');
+    expect(lastCallOf(checkboxType)).not.toHaveProperty('value');
+    expect(lastCallOf(radioType)).toHaveProperty('checked');
+    expect(lastCallOf(radioType)).not.toHaveProperty('value');
+  });
 });