Select: fix form change validation (#11672)

packages/select/src/select.vue

@@ -339,7 +339,7 @@
         this.cachedPlaceHolder = this.currentPlaceholder = val;
       },
 
-      value(val) {
+      value(val, oldVal) {
         if (this.multiple) {
           this.resetInputHeight();
           if (val.length > 0 || (this.$refs.input && this.query !== '')) {
@@ -356,6 +356,9 @@
         if (this.filterable && !this.multiple) {
           this.inputLength = 20;
         }
+        if (!valueEquals(val, oldVal)) {
+          this.dispatch('ElFormItem', 'el.form.change', val);
+        }
       },
 
       visible(val) {
@@ -503,7 +506,6 @@
       emitChange(val) {
         if (!valueEquals(this.value, val)) {
           this.$emit('change', val);
-          this.dispatch('ElFormItem', 'el.form.change', val);
         }
       },
 

test/unit/specs/form.spec.js

@@ -380,8 +380,11 @@ describe('Form', () => {
         expect(valid).to.false;
         setTimeout(_ => {
           expect(field.validateMessage).to.equal('请选择活动区域');
-          // programatic modification of bound value does not triggers change validation
+          // programatic modification triggers change validation
           vm.form.region = 'shanghai';
+          setTimeout(_ => {
+            expect(field.validateMessage).to.equal('');
+            vm.form.region = '';
             setTimeout(_ => {
               expect(field.validateMessage).to.equal('请选择活动区域');
               // user modification of bound value triggers change validation
@@ -392,6 +395,7 @@ describe('Form', () => {
               }, 100);
             }, 100);
           }, 100);
+        }, 100);
       });
     });
     it('datepicker', done => {