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,15 +380,19 @@ 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('请选择活动区域');
-            // user modification of bound value triggers change validation
-            vm.$refs.opt.$el.click();
+            expect(field.validateMessage).to.equal('');
+            vm.form.region = '';
             setTimeout(_ => {
-              expect(field.validateMessage).to.equal('');
-              done();
+              expect(field.validateMessage).to.equal('请选择活动区域');
+              // user modification of bound value triggers change validation
+              vm.$refs.opt.$el.click();
+              setTimeout(_ => {
+                expect(field.validateMessage).to.equal('');
+                done();
+              }, 100);
             }, 100);
           }, 100);
         }, 100);