fix: avoid binding the value to file inputs

logaretm · Oct 2, 2020 · 02a2745 · 02a2745
1 parent 18fb60e
commit 02a2745
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 6 deletions.
diff --git a/packages/core/src/Field.ts b/packages/core/src/Field.ts
@@ -1,7 +1,7 @@
-import { h, defineComponent, nextTick, toRef } from 'vue';
+import { h, defineComponent, nextTick, toRef, SetupContext } from 'vue';
 import { getConfig } from './config';
 import { useField } from './useField';
-import { normalizeChildren, isHTMLTag, hasCheckedAttr } from './utils';
+import { normalizeChildren, isHTMLTag, hasCheckedAttr, isFileInput } from './utils';
 
 export const Field = defineComponent({
   name: 'Field',
@@ -106,6 +106,10 @@ export const Field = defineComponent({
         fieldProps.value = value.value;
       }
 
+      if (isFileInput(resolveTag(props, ctx), ctx.attrs.type as string)) {
+        delete fieldProps.value;
+      }
+
       return {
         field: fieldProps,
         aria: aria.value,
@@ -119,11 +123,8 @@ export const Field = defineComponent({
     };
 
     return () => {
-      let tag: string | undefined = props.as;
+      const tag = resolveTag(props, ctx);
       const slotProps = makeSlotProps();
-      if (!props.as && !ctx.slots.default) {
-        tag = 'input';
-      }
 
       // Sync the model value with the inner field value if they mismatch
       // a simple string comparison is used here
@@ -151,3 +152,13 @@ export const Field = defineComponent({
     };
   },
 });
+
+function resolveTag(props: Record<string, any>, ctx: SetupContext) {
+  let tag: string = props.as || '';
+
+  if (!props.as && !ctx.slots.default) {
+    tag = 'input';
+  }
+
+  return tag;
+}
diff --git a/packages/core/src/utils/assertions.ts b/packages/core/src/utils/assertions.ts
@@ -12,6 +12,13 @@ export function isHTMLTag(tag: string) {
   return ['input', 'textarea', 'select'].includes(tag);
 }
 
+/**
+ * Checks if an input is of type file
+ */
+export function isFileInput(tag: string, type: string) {
+  return isHTMLTag(tag) && type === 'file';
+}
+
 type YupValidator = { validate: (value: any) => Promise<void | boolean> };
 
 export function isYupValidator(value: unknown): value is YupValidator {