fix(VFileInput): issues selecting files in ie/edge (#8718)

* fix(VFileInput): issues selecting files in ie/edge readonly is not available on type=file according to html spec, and ie does not like it. additionally, we should not be setting dom value of input element to anything other than empty string. fixes #8693 * docs(VFileInput): remove readonly prop
vuetifyjs · Aug 28, 2019 · 3ca386d · 3ca386d
1 parent 8db1566
commit 3ca386d
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 27 deletions.
diff --git a/packages/docs/src/data/deprecated.json b/packages/docs/src/data/deprecated.json
@@ -71,6 +71,9 @@
       "mandatory": false,
       "max": false,
       "multiple": false
+    },
+    "v-file-input": {
+      "readonly": false
     }
   }
 }
diff --git a/packages/vuetify/src/components/VFileInput/VFileInput.ts b/packages/vuetify/src/components/VFileInput/VFileInput.ts
@@ -12,6 +12,7 @@ import { PropValidator } from 'vue/types/options'
 
 // Utilities
 import { humanReadableFileSize, wrapInArray } from '../../util/helpers'
+import { consoleError } from '../../util/console'
 
 export default VTextField.extend({
   name: 'v-file-input',
@@ -42,7 +43,7 @@ export default VTextField.extend({
     },
     readonly: {
       type: Boolean,
-      default: true,
+      default: false,
     },
     showSize: {
       type: [Boolean, Number],
@@ -71,10 +72,6 @@ export default VTextField.extend({
     } as PropValidator<File | File[]>,
   },
 
-  data: () => ({
-    internalFileInput: null,
-  }),
-
   computed: {
     classes (): object {
       return {
@@ -137,10 +134,19 @@ export default VTextField.extend({
     },
   },
 
+  watch: {
+    readonly: {
+      handler (v) {
+        if (v === true) consoleError('readonly is not supported on <v-file-input>', this)
+      },
+      immediate: true,
+    },
+  },
+
   methods: {
     clearableCallback () {
       this.internalValue = this.isMultiple ? [] : null
-      this.internalFileInput = null
+      this.$refs.input.value = ''
     },
     genChips () {
       if (!this.isDirty) return []
@@ -159,7 +165,10 @@ export default VTextField.extend({
     genInput () {
       const input = VTextField.options.methods.genInput.call(this)
 
-      input.data!.domProps!.value = this.internalFileInput
+      // We should not be setting value
+      // programmatically on the input
+      // when it is using type="file"
+      delete input.data!.domProps!.value
 
       // This solves an issue in Safari where
       // nothing happens when adding a file

diff --git a/packages/vuetify/src/components/VFileInput/__tests__/__snapshots__/VFileInput.spec.ts.snap b/packages/vuetify/src/components/VFileInput/__tests__/__snapshots__/VFileInput.spec.ts.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`VFileInput.ts should be unclearable 1`] = `
-<div class="v-input v-input--is-readonly theme--light v-text-field v-file-input">
+<div class="v-input theme--light v-text-field v-file-input">
   <div class="v-input__prepend-outer">
     <div class="v-input__icon v-input__icon--prepend">
       <i role="button"
@@ -17,7 +17,6 @@ exports[`VFileInput.ts should be unclearable 1`] = `
         <div class="v-file-input__text">
         </div>
         <input id="input-25"
-               readonly="readonly"
                type="file"
         >
       </div>
@@ -36,7 +35,7 @@ exports[`VFileInput.ts should be unclearable 1`] = `
 `;
 
 exports[`VFileInput.ts should display file size 1`] = `
-<div class="v-input v-input--is-label-active v-input--is-dirty v-input--is-readonly theme--light v-text-field v-file-input">
+<div class="v-input v-input--is-label-active v-input--is-dirty theme--light v-text-field v-file-input">
   <div class="v-input__prepend-outer">
     <div class="v-input__icon v-input__icon--prepend">
       <i role="button"
@@ -53,7 +52,6 @@ exports[`VFileInput.ts should display file size 1`] = `
           test (2.1 MB)
         </div>
         <input id="input-13"
-               readonly="readonly"
                type="file"
         >
       </div>
@@ -81,7 +79,7 @@ exports[`VFileInput.ts should display file size 1`] = `
 `;
 
 exports[`VFileInput.ts should display file size 2`] = `
-<div class="v-input v-input--is-label-active v-input--is-dirty v-input--is-readonly theme--light v-text-field v-file-input">
+<div class="v-input v-input--is-label-active v-input--is-dirty theme--light v-text-field v-file-input">
   <div class="v-input__prepend-outer">
     <div class="v-input__icon v-input__icon--prepend">
       <i role="button"
@@ -98,7 +96,6 @@ exports[`VFileInput.ts should display file size 2`] = `
           test (2.1 MB)
         </div>
         <input id="input-13"
-               readonly="readonly"
                type="file"
         >
       </div>
@@ -126,7 +123,7 @@ exports[`VFileInput.ts should display file size 2`] = `
 `;
 
 exports[`VFileInput.ts should display total size in counter 1`] = `
-<div class="v-input v-input--is-label-active v-input--is-dirty v-input--is-readonly theme--light v-text-field v-file-input">
+<div class="v-input v-input--is-label-active v-input--is-dirty theme--light v-text-field v-file-input">
   <div class="v-input__prepend-outer">
     <div class="v-input__icon v-input__icon--prepend">
       <i role="button"
@@ -143,7 +140,6 @@ exports[`VFileInput.ts should display total size in counter 1`] = `
           2 files
         </div>
         <input id="input-19"
-               readonly="readonly"
                type="file"
         >
       </div>
@@ -174,7 +170,7 @@ exports[`VFileInput.ts should display total size in counter 1`] = `
 `;
 
 exports[`VFileInput.ts should display total size in counter 2`] = `
-<div class="v-input v-input--is-label-active v-input--is-dirty v-input--is-readonly theme--light v-text-field v-file-input">
+<div class="v-input v-input--is-label-active v-input--is-dirty theme--light v-text-field v-file-input">
   <div class="v-input__prepend-outer">
     <div class="v-input__icon v-input__icon--prepend">
       <i role="button"
@@ -191,7 +187,6 @@ exports[`VFileInput.ts should display total size in counter 2`] = `
           2 files
         </div>
         <input id="input-19"
-               readonly="readonly"
                type="file"
         >
       </div>
@@ -222,7 +217,7 @@ exports[`VFileInput.ts should display total size in counter 2`] = `
 `;
 
 exports[`VFileInput.ts should render 1`] = `
-<div class="v-input v-input--is-readonly theme--light v-text-field v-file-input">
+<div class="v-input theme--light v-text-field v-file-input">
   <div class="v-input__prepend-outer">
     <div class="v-input__icon v-input__icon--prepend">
       <i role="button"
@@ -238,7 +233,6 @@ exports[`VFileInput.ts should render 1`] = `
         <div class="v-file-input__text">
         </div>
         <input id="input-1"
-               readonly="readonly"
                type="file"
         >
       </div>
@@ -265,7 +259,7 @@ exports[`VFileInput.ts should render 1`] = `
 `;
 
 exports[`VFileInput.ts should render chips 1`] = `
-<div class="v-input v-input--is-label-active v-input--is-dirty v-input--is-readonly theme--light v-text-field v-file-input">
+<div class="v-input v-input--is-label-active v-input--is-dirty theme--light v-text-field v-file-input">
   <div class="v-input__prepend-outer">
     <div class="v-input__icon v-input__icon--prepend">
       <i role="button"
@@ -286,7 +280,6 @@ exports[`VFileInput.ts should render chips 1`] = `
           </span>
         </div>
         <input id="input-69"
-               readonly="readonly"
                type="file"
         >
       </div>
@@ -314,7 +307,7 @@ exports[`VFileInput.ts should render chips 1`] = `
 `;
 
 exports[`VFileInput.ts should render counter 1`] = `
-<div class="v-input v-input--is-label-active v-input--is-dirty v-input--is-readonly theme--light v-text-field v-file-input">
+<div class="v-input v-input--is-label-active v-input--is-dirty theme--light v-text-field v-file-input">
   <div class="v-input__prepend-outer">
     <div class="v-input__icon v-input__icon--prepend">
       <i role="button"
@@ -331,7 +324,6 @@ exports[`VFileInput.ts should render counter 1`] = `
           test
         </div>
         <input id="input-7"
-               readonly="readonly"
                type="file"
         >
       </div>
@@ -362,7 +354,7 @@ exports[`VFileInput.ts should render counter 1`] = `
 `;
 
 exports[`VFileInput.ts should render small chips 1`] = `
-<div class="v-input v-input--is-label-active v-input--is-dirty v-input--is-readonly theme--light v-text-field v-file-input">
+<div class="v-input v-input--is-label-active v-input--is-dirty theme--light v-text-field v-file-input">
   <div class="v-input__prepend-outer">
     <div class="v-input__icon v-input__icon--prepend">
       <i role="button"
@@ -383,7 +375,6 @@ exports[`VFileInput.ts should render small chips 1`] = `
           </span>
         </div>
         <input id="input-76"
-               readonly="readonly"
                type="file"
         >
       </div>
@@ -411,14 +402,13 @@ exports[`VFileInput.ts should render small chips 1`] = `
 `;
 
 exports[`VFileInput.ts should render without icon 1`] = `
-<div class="v-input v-input--is-readonly theme--light v-text-field v-file-input">
+<div class="v-input theme--light v-text-field v-file-input">
   <div class="v-input__control">
     <div class="v-input__slot">
       <div class="v-text-field__slot">
         <div class="v-file-input__text">
         </div>
         <input id="input-83"
-               readonly="readonly"
                type="file"
         >
       </div>