Merge pull request #295 from monterail/fix-value-clear-error

Fix clearing the `value` of single select with null
shentao · Mar 5, 2017 · f22988f · f22988f
2 parents 9f0f775 + c02008f
commit f22988f
Show file tree

Hide file tree

Showing 2 changed files with 86 additions and 2 deletions.
diff --git a/src/multiselectMixin.js b/src/multiselectMixin.js
@@ -331,14 +331,31 @@ export default {
       this.$emit('search-change', this.search, this.id)
     },
     'value' (value) {
-      this.internalValue = deepClone(Array.isArray(value) ? value : [value])
+      this.internalValue = this.getInternalValue()
     }
   },
   methods: {
+    /**
+     * Converts the internal value to the external value
+     * @returns {Object||Array||String||Integer} returns the external value
+     */
     getValue () {
       return this.multiple
         ? deepClone(this.internalValue)
-        : deepClone(this.internalValue[0])
+        : this.internalValue.length === 0
+          ? null
+          : deepClone(this.internalValue[0])
+    },
+    /**
+     * Converts the external value to the internal value
+     * @returns {Array} returns the internal value
+     */
+    getInternalValue () {
+      return this.multiple
+        ? deepClone(this.value)
+        : this.value === null || this.value === undefined
+          ? []
+          : deepClone([this.value])
     },
     /**
      * Filters and then flattens the options list

diff --git a/test/unit/specs/Multiselect.spec.js b/test/unit/specs/Multiselect.spec.js
@@ -2815,4 +2815,71 @@ describe('Multiselect.vue', () => {
       expect(vm.$children[0].search).to.equal('test')
     })
   })
+  describe('#getInternalValue', () => {
+    describe('when multiple == TRUE', () => {
+      it('should return the external value', () => {
+        const vm = new Vue({
+          render (h) {
+            return h(Multiselect, {
+              props: {
+                options: this.source,
+                value: this.value,
+                multiple: true
+              }
+            })
+          },
+          components: { Multiselect },
+          data: {
+            value: ['1', '2', '3'],
+            source: ['1', '2', '3', '4', '5']
+          }
+        }).$mount()
+        expect(vm.$children[0].getInternalValue()).to.deep.equal(['1', '2', '3'])
+      })
+    })
+    describe('when multiple == FALSE', () => {
+      describe('and an option is selected', () => {
+        it('should return the exernal value in an array', () => {
+          const vm = new Vue({
+            render (h) {
+              return h(Multiselect, {
+                props: {
+                  options: this.source,
+                  value: this.value,
+                  multiple: false
+                }
+              })
+            },
+            components: { Multiselect },
+            data: {
+              value: '1',
+              source: ['1', '2', '3', '4', '5']
+            }
+          }).$mount()
+          expect(vm.$children[0].getInternalValue()).to.deep.equal(['1'])
+        })
+      })
+      describe('and the selection is empty', () => {
+        it('should return an empty array', () => {
+          const vm = new Vue({
+            render (h) {
+              return h(Multiselect, {
+                props: {
+                  options: this.source,
+                  value: this.value,
+                  multiple: false
+                }
+              })
+            },
+            components: { Multiselect },
+            data: {
+              value: null,
+              source: ['1', '2', '3', '4', '5']
+            }
+          }).$mount()
+          expect(vm.$children[0].getInternalValue()).to.deep.equal([])
+        })
+      })
+    })
+  })
 })