[Bugfix] el-select multiple with vuex (#4226)

* Select: Fix Vuex compability when using multiple

* Adding timeout for first click to allow input event to propagate before second click

* Update select.vue

packages/select/src/select.vue

@@ -463,7 +463,9 @@
 
       deletePrevTag(e) {
         if (e.target.value.length <= 0 && !this.toggleLastOptionHitState()) {
-          this.value.pop();
+          const value = this.value.slice();
+          value.pop();
+          this.$emit('input', value);
         }
       },
 
@@ -506,26 +508,23 @@
       },
 
       handleOptionSelect(option) {
-        if (!this.multiple) {
+        if (this.multiple) {
-          this.$emit('input', option.value);
+          const value = this.value.slice();
-          this.visible = false;
+          const optionIndex = value.indexOf(option.value);
-        } else {
-          let optionIndex = -1;
-          this.value.forEach((item, index) => {
-            if (item === option.value) {
-              optionIndex = index;
-            }
-          });
           if (optionIndex > -1) {
-            this.value.splice(optionIndex, 1);
+            value.splice(optionIndex, 1);
-          } else if (this.multipleLimit <= 0 || this.value.length < this.multipleLimit) {
+          } else if (this.multipleLimit <= 0 || value.length < this.multipleLimit) {
-            this.value.push(option.value);
+            value.push(option.value);
           }
+          this.$emit('input', value);
           if (option.created) {
             this.query = '';
             this.inputLength = 20;
           }
           if (this.filterable) this.$refs.input.focus();
+        } else {
+          this.$emit('input', option.value);
+          this.visible = false;
         }
       },
 
@@ -601,7 +600,9 @@
       deleteTag(event, tag) {
         let index = this.selected.indexOf(tag);
         if (index > -1 && !this.disabled) {
-          this.value.splice(index, 1);
+          const value = this.value.slice();
+          value.splice(index, 1);
+          this.$emit('input', value);
           this.$emit('remove-tag', tag);
         }
         event.stopPropagation();

test/unit/specs/select.spec.js

@@ -429,14 +429,16 @@ describe('Select', () => {
     vm.value = ['选项1'];
     setTimeout(() => {
       options[1].click();
-      options[3].click();
       setTimeout(() => {
-        expect(vm.value.indexOf('选项2') > -1 && vm.value.indexOf('选项4') > -1).to.true;
+        options[3].click();
-        const tagCloseIcons = vm.$el.querySelectorAll('.el-tag__close');
-        tagCloseIcons[0].click();
         setTimeout(() => {
-          expect(vm.value.indexOf('选项1')).to.equal(-1);
+          expect(vm.value.indexOf('选项2') > -1 && vm.value.indexOf('选项4') > -1).to.true;
-          done();
+          const tagCloseIcons = vm.$el.querySelectorAll('.el-tag__close');
+          tagCloseIcons[0].click();
+          setTimeout(() => {
+            expect(vm.value.indexOf('选项1')).to.equal(-1);
+            done();
+          }, 100);
         }, 100);
       }, 100);
     }, 100);