fix(VFileInput): allow multiple to be bound as false

fixes #9530
vuetifyjs · Jul 5, 2021 · 08c1e89 · 08c1e89
1 parent 00605f5
commit 08c1e89
Show file tree

Hide file tree

Showing 3 changed files with 65 additions and 17 deletions.
diff --git a/packages/vuetify/src/components/VFileInput/VFileInput.ts b/packages/vuetify/src/components/VFileInput/VFileInput.ts
@@ -38,6 +38,7 @@ export default VTextField.extend({
       default: '$vuetify.fileInput.counter',
     },
     hideInput: Boolean,
+    multiple: Boolean,
     placeholder: String,
     prependIcon: {
       type: String,
@@ -82,7 +83,7 @@ export default VTextField.extend({
       }
     },
     computedCounterValue (): string {
-      const fileCount = (this.isMultiple && this.lazyValue)
+      const fileCount = (this.multiple && this.lazyValue)
         ? this.lazyValue.length
         : (this.lazyValue instanceof File) ? 1 : 0
 
@@ -116,9 +117,6 @@ export default VTextField.extend({
     isLabelActive (): boolean {
       return this.isDirty
     },
-    isMultiple (): boolean {
-      return this.$attrs.hasOwnProperty('multiple')
-    },
     text (): string[] {
       if (!this.isDirty && (this.isFocused || !this.hasLabel)) return [this.placeholder]
 
@@ -151,7 +149,7 @@ export default VTextField.extend({
       immediate: true,
     },
     value (v) {
-      const value = this.isMultiple ? v : v ? [v] : []
+      const value = this.multiple ? v : v ? [v] : []
       if (!deepEqual(value, this.$refs.input.files)) {
         // When the input value is changed programatically, clear the
         // internal input's value so that the `onInput` handler
@@ -165,7 +163,7 @@ export default VTextField.extend({
 
   methods: {
     clearableCallback () {
-      this.internalValue = this.isMultiple ? [] : null
+      this.internalValue = this.multiple ? [] : null
       this.$refs.input.value = ''
     },
     genChips () {
@@ -197,6 +195,8 @@ export default VTextField.extend({
     genInput () {
       const input = VTextField.options.methods.genInput.call(this)
 
+      input.data!.attrs!.multiple = this.multiple
+
       // We should not be setting value
       // programmatically on the input
       // when it is using type="file"
@@ -267,7 +267,7 @@ export default VTextField.extend({
     onInput (e: Event) {
       const files = [...(e.target as HTMLInputElement).files || []]
 
-      this.internalValue = this.isMultiple ? files : files[0]
+      this.internalValue = this.multiple ? files : files[0]
 
       // Set initialValue here otherwise isFocused
       // watcher in VTextField will emit a change

diff --git a/packages/vuetify/src/components/VFileInput/__tests__/VFileInput.spec.ts b/packages/vuetify/src/components/VFileInput/__tests__/VFileInput.spec.ts
@@ -42,6 +42,14 @@ describe('VFileInput.ts', () => {
     expect(wrapper.html()).toMatchSnapshot()
   })
 
+  it('should render multiple', () => {
+    const wrapper = mountFunction({
+      propsData: { multiple: true },
+    })
+
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+
   it('should render counter', () => {
     const wrapper = mountFunction({
       propsData: {

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
@@ -17,7 +17,7 @@ exports[`VFileInput.ts should be unclearable 1`] = `
       <div class="v-text-field__slot">
         <div class="v-file-input__text">
         </div>
-        <input id="input-24"
+        <input id="input-29"
                type="file"
         >
       </div>
@@ -53,7 +53,7 @@ exports[`VFileInput.ts should display file size 1`] = `
         <div class="v-file-input__text">
           test (2.1 MB)
         </div>
-        <input id="input-12"
+        <input id="input-17"
                type="file"
         >
       </div>
@@ -99,7 +99,7 @@ exports[`VFileInput.ts should display file size 2`] = `
         <div class="v-file-input__text">
           test (2.1 MB)
         </div>
-        <input id="input-12"
+        <input id="input-17"
                type="file"
         >
       </div>
@@ -145,7 +145,7 @@ exports[`VFileInput.ts should display total size in counter 1`] = `
         <div class="v-file-input__text">
           2 files
         </div>
-        <input id="input-18"
+        <input id="input-23"
                type="file"
         >
       </div>
@@ -194,7 +194,7 @@ exports[`VFileInput.ts should display total size in counter 2`] = `
         <div class="v-file-input__text">
           2 files
         </div>
-        <input id="input-18"
+        <input id="input-23"
                type="file"
         >
       </div>
@@ -286,7 +286,7 @@ exports[`VFileInput.ts should render chips 1`] = `
             </span>
           </span>
         </div>
-        <input id="input-62"
+        <input id="input-67"
                type="file"
         >
       </div>
@@ -332,7 +332,7 @@ exports[`VFileInput.ts should render counter 1`] = `
         <div class="v-file-input__text">
           test
         </div>
-        <input id="input-6"
+        <input id="input-11"
                type="file"
         >
       </div>
@@ -363,6 +363,46 @@ exports[`VFileInput.ts should render counter 1`] = `
 </div>
 `;
 
+exports[`VFileInput.ts should render multiple 1`] = `
+<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">
+      <button type="button"
+              aria-label="prepend icon"
+              class="v-icon notranslate v-icon--link material-icons theme--light"
+      >
+        $file
+      </button>
+    </div>
+  </div>
+  <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-6"
+               type="file"
+               multiple="multiple"
+        >
+      </div>
+      <div class="v-input__append-inner">
+        <div>
+        </div>
+      </div>
+    </div>
+    <div class="v-text-field__details">
+      <div class="v-messages theme--light">
+        <span name="message-transition"
+              tag="div"
+              class="v-messages__wrapper"
+        >
+        </span>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`VFileInput.ts should render small chips 1`] = `
 <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">
@@ -385,7 +425,7 @@ exports[`VFileInput.ts should render small chips 1`] = `
             </span>
           </span>
         </div>
-        <input id="input-69"
+        <input id="input-74"
                type="file"
         >
       </div>
@@ -420,7 +460,7 @@ exports[`VFileInput.ts should render without icon 1`] = `
       <div class="v-text-field__slot">
         <div class="v-file-input__text">
         </div>
-        <input id="input-76"
+        <input id="input-81"
                type="file"
         >
       </div>
@@ -461,7 +501,7 @@ exports[`VFileInput.ts should set display none if hide-input prop is set 1`] = `
       <div class="v-text-field__slot">
         <div class="v-file-input__text">
         </div>
-        <input id="input-102"
+        <input id="input-107"
                type="file"
         >
       </div>