Checkbox: change event only triggers on user input

examples/docs/en-US/checkbox.md

@@ -23,8 +23,8 @@
       handleChange(ev) {
         console.log(ev);
       },
-      handleCheckAllChange(event) {
-        this.checkedCities = event.target.checked ? cityOptions : [];
+      handleCheckAllChange(val) {
+        this.checkedCities = val ? cityOptions : [];
         this.isIndeterminate = false;
       },
       handleCheckedCitiesChange(value) {
@@ -234,6 +234,11 @@ Checkbox with button styles.
 | checked  | if the checkbox is checked   | boolean   |  — | false   |
 | indeterminate  | same as `indeterminate` in native checkbox | boolean   |  — | false   |
 
+### Checkbox Events
+| Event Name | Description | Parameters |
+|---------- |-------- |---------- |
+| change  | triggers when the binding value changes | the updated value |
+
 ### Checkbox-group Attributes
 | Attribute      | Description         | Type    | Options                         | Default|
 |---------- |-------- |---------- |-------------  |-------- |
@@ -243,8 +248,7 @@ Checkbox with button styles.
 | min     | minimum number of checkbox checked   | number    |       —        |     —    |
 | max     | maximum number of checkbox checked   | number    |       —        |     —    |
 
-### Checkbox Events
+### Checkbox-group Events
 | Event Name | Description | Parameters |
 |---------- |-------- |---------- |
-| change  | triggers when the binding value changes | Event object |
-
+| change  | triggers when the binding value changes | the updated value |

examples/docs/zh-CN/checkbox.md

@@ -23,8 +23,8 @@
       handleChange(ev) {
         console.log(ev);
       },
-      handleCheckAllChange(event) {
-        this.checkedCities = event.target.checked ? cityOptions : [];
+      handleCheckAllChange(val) {
+        this.checkedCities = val ? cityOptions : [];
         this.isIndeterminate = false;
       },
       handleCheckedCitiesChange(value) {
@@ -245,6 +245,11 @@
 | checked  | 当前是否勾选    | boolean   |  — | false   |
 | indeterminate  | 设置 indeterminate 状态，只负责样式控制    | boolean   |  — | false   |
 
+### Checkbox Events
+| 事件名称      | 说明    | 回调参数      |
+|---------- |-------- |---------- |
+| change  | 当绑定值变化时触发的事件 | 更新后的值 |
+
 ### Checkbox-group Attributes
 | 参数      | 说明    | 类型      | 可选值       | 默认值   |
 |---------- |-------- |---------- |-------------  |-------- |
@@ -254,7 +259,7 @@
 | min     | 可被勾选的 checkbox 的最小数量   | number    |       —        |     —    |
 | max     | 可被勾选的 checkbox 的最大数量   | number    |       —        |     —    |
 
-### Checkbox Events
+### Checkbox-group Events
 | 事件名称      | 说明    | 回调参数      |
 |---------- |-------- |---------- |
-| change  | 当绑定值变化时触发的事件 | event 事件对象 |
+| change  | 当绑定值变化时触发的事件 | 更新后的值 |

packages/checkbox/src/checkbox-button.vue

@@ -54,7 +54,8 @@
     data() {
       return {
         selfModel: false,
-        focus: false
+        focus: false,
+        isLimitExceeded: false
       };
     },
 
@@ -77,16 +78,16 @@
 
         set(val) {
           if (this._checkboxGroup) {
-            let isLimitExceeded = false;
+            this.isLimitExceeded = false;
             (this._checkboxGroup.min !== undefined &&
               val.length < this._checkboxGroup.min &&
-              (isLimitExceeded = true));
+              (this.isLimitExceeded = true));
 
             (this._checkboxGroup.max !== undefined &&
               val.length > this._checkboxGroup.max &&
-              (isLimitExceeded = true));
+              (this.isLimitExceeded = true));
 
-            isLimitExceeded === false &&
+            this.isLimitExceeded === false &&
             this.dispatch('ElCheckboxGroup', 'input', [val]);
           } else if (this.value !== undefined) {
             this.$emit('input', val);
@@ -148,12 +149,13 @@
         }
       },
       handleChange(ev) {
-        this.$emit('change', ev);
-        if (this._checkboxGroup) {
-          this.$nextTick(_ => {
+        this.$nextTick(() => {
+          if (this.isLimitExceeded) return;
+          this.$emit('change', this.model, ev);
+          if (this._checkboxGroup) {
             this.dispatch('ElCheckboxGroup', 'change', [this._checkboxGroup.value]);
-          });
-        }
+          }
+        });
       }
     },
 

packages/checkbox/src/checkbox.vue

@@ -59,7 +59,8 @@
     data() {
       return {
         selfModel: false,
-        focus: false
+        focus: false,
+        isLimitExceeded: false
       };
     },
 
@@ -73,16 +74,16 @@
 
         set(val) {
           if (this.isGroup) {
-            let isLimitExceeded = false;
+            this.isLimitExceeded = false;
             (this._checkboxGroup.min !== undefined &&
               val.length < this._checkboxGroup.min &&
-              (isLimitExceeded = true));
+              (this.isLimitExceeded = true));
 
             (this._checkboxGroup.max !== undefined &&
               val.length > this._checkboxGroup.max &&
-              (isLimitExceeded = true));
+              (this.isLimitExceeded = true));
 
-            isLimitExceeded === false &&
+            this.isLimitExceeded === false &&
             this.dispatch('ElCheckboxGroup', 'input', [val]);
           } else {
             this.$emit('input', val);
@@ -144,12 +145,13 @@
         }
       },
       handleChange(ev) {
-        this.$emit('change', ev);
-        if (this.isGroup) {
-          this.$nextTick(_ => {
+        this.$nextTick(() => {
+          if (this.isLimitExceeded) return;
+          this.$emit('change', this.model, ev);
+          if (this.isGroup) {
             this.dispatch('ElCheckboxGroup', 'change', [this._checkboxGroup.value]);
-          });
-        }
+          }
+        });
       }
     },
 

packages/transfer/src/transfer-panel.vue

@@ -215,7 +215,7 @@
       },
 
       handleAllCheckedChange(value) {
-        this.checked = value.target.checked
+        this.checked = value
           ? this.checkableData.map(item => item[this.keyProp])
           : [];
       },

packages/tree/src/tree-node.vue

@@ -157,7 +157,7 @@
         }
       },
 
-      handleCheckChange(ev) {
+      handleCheckChange(value, ev) {
         this.node.setChecked(ev.target.checked, !this.tree.checkStrictly);
       },
 

test/unit/specs/cascader.spec.js

@@ -601,7 +601,6 @@ describe('Cascader', () => {
 
         expect(menuElm.children.length).to.be.equal(1);
         expect(menuElm.children[0].children.length).to.be.equal(3);
-        done();
 
         item1.click();
 

test/unit/specs/checkbox.spec.js

@@ -44,6 +44,35 @@ describe('Checkbox', () => {
     let checkboxElm = vm.$el;
     expect(checkboxElm.querySelector('.is-disabled')).to.be.ok;
   });
+  it('change event', done => {
+    vm = createVue({
+      template: `
+        <el-checkbox v-model="checked" @change="onChange">
+        </el-checkbox>
+      `,
+      methods: {
+        onChange(val) {
+          this.data = val;
+        }
+      },
+      data() {
+        return {
+          data: '',
+          checked: false
+        };
+      }
+    }, true);
+    let checkboxElm = vm.$el;
+    checkboxElm.click();
+    setTimeout(_ => {
+      expect(vm.data).to.true;
+      vm.checked = false;
+      setTimeout(_ => {
+        expect(vm.data).to.true;
+        done();
+      }, 10);
+    }, 10);
+  });
   it('checkbox group', done => {
     vm = createVue({
       template: `
@@ -68,6 +97,34 @@ describe('Checkbox', () => {
     });
   });
 
+  it('checkbox group change event', done => {
+    vm = createVue({
+      template: `
+        <el-checkbox-group v-model="checkList" @change="onChange">
+          <el-checkbox label="a" ref="a"></el-checkbox>
+          <el-checkbox label="b" ref="b"></el-checkbox>
+        </el-checkbox-group>
+      `,
+      methods: {
+        onChange(val) {
+          this.data = val;
+        }
+      },
+      data() {
+        return {
+          data: '',
+          checkList: []
+        };
+      }
+    }, true);
+    vm.$refs.a.$el.click();
+    setTimeout(_ => {
+      expect(vm.data).to.deep.equal(['a']);
+      vm.checkList = ['b'];
+      done();
+    }, 10);
+  });
+
   it('checkbox group minimum and maximum', done => {
     vm = createVue({
       template: `
@@ -216,6 +273,36 @@ describe('Checkbox', () => {
       expect(checkboxElm.classList.contains('is-disabled')).to.be.ok;
     });
 
+    it('change event', done => {
+      vm = createVue({
+        template: `
+        <el-checkbox-button v-model="checked" @change="onChange">
+        </el-checkbox-button>
+      `,
+        methods: {
+          onChange(val) {
+            this.data = val;
+          }
+        },
+        data() {
+          return {
+            data: '',
+            checked: false
+          };
+        }
+      }, true);
+      let checkboxElm = vm.$el;
+      checkboxElm.click();
+      setTimeout(_ => {
+        expect(vm.data).to.true;
+        vm.checked = false;
+        setTimeout(_ => {
+          expect(vm.data).to.true;
+          done();
+        }, 10);
+      }, 10);
+    });
+
     it('checkbox group', done => {
       vm = createVue({
         template: `
@@ -245,6 +332,39 @@ describe('Checkbox', () => {
       });
     });
 
+    it('checkbox-button group change event', done => {
+      vm = createVue({
+        template: `
+        <el-checkbox-group v-model="checkList" @change="onChange">
+          <el-checkbox-button label="a" ref="a"></el-checkbox-button>
+          <el-checkbox-button label="b" ref="b"></el-checkbox-button>
+          <el-checkbox-button label="c" ref="c"></el-checkbox-button>
+          <el-checkbox-button label="d" ref="d"></el-checkbox-button>
+        </el-checkbox-group>
+      `,
+        methods: {
+          onChange(val) {
+            this.data = val;
+          }
+        },
+        data() {
+          return {
+            data: '',
+            checkList: []
+          };
+        }
+      }, true);
+      vm.$refs.a.$el.click();
+      setTimeout(_ => {
+        expect(vm.data).to.deep.equal(['a']);
+        vm.checkList = ['b'];
+        setTimeout(_ => {
+          expect(vm.data).to.deep.equal(['a']);
+          done();
+        }, 10);
+      }, 10);
+    });
+
     it('checkbox group props', () => {
       vm = createVue({
         template: `

test/unit/specs/tree.spec.js

@@ -299,16 +299,20 @@ describe('Tree', () => {
     const nodeCheckbox = secondNode.querySelector('.el-checkbox');
     expect(nodeCheckbox).to.be.exist;
     nodeCheckbox.click();
-    expect(tree.getCheckedNodes().length).to.equal(3);
-    expect(tree.getCheckedNodes(true).length).to.equal(2);
-    secondNode.querySelector('.el-tree-node__expand-icon').click();
     setTimeout(() => {
-      const firstLeaf = secondNode.nextElementSibling.querySelector('.el-tree-node__content');
-      const leafCheckbox = firstLeaf.querySelector('.el-checkbox');
-      leafCheckbox.click();
-      expect(tree.getCheckedNodes().length).to.equal(1);
-      done();
-    }, 100);
+      expect(tree.getCheckedNodes().length).to.equal(3);
+      expect(tree.getCheckedNodes(true).length).to.equal(2);
+      secondNode.querySelector('.el-tree-node__expand-icon').click();
+      setTimeout(() => {
+        const firstLeaf = secondNode.nextElementSibling.querySelector('.el-tree-node__content');
+        const leafCheckbox = firstLeaf.querySelector('.el-checkbox');
+        leafCheckbox.click();
+        setTimeout(() => {
+          expect(tree.getCheckedNodes().length).to.equal(1);
+          done();
+        }, 10);
+      }, 10);
+    }, 10);
   });
 
   it('setCheckedNodes', (done) => {
@@ -317,13 +321,15 @@ describe('Tree', () => {
     const secondNode = document.querySelectorAll('.el-tree-node__content')[1];
     const nodeCheckbox = secondNode.querySelector('.el-checkbox');
     nodeCheckbox.click();
-    expect(tree.getCheckedNodes().length).to.equal(3);
-    expect(tree.getCheckedNodes(true).length).to.equal(2);
-    vm.$nextTick(() => {
-      tree.setCheckedNodes([]);
-      expect(tree.getCheckedNodes().length).to.equal(0);
-      done();
-    });
+    setTimeout(() => {
+      expect(tree.getCheckedNodes().length).to.equal(3);
+      expect(tree.getCheckedNodes(true).length).to.equal(2);
+      setTimeout(() => {
+        tree.setCheckedNodes([]);
+        expect(tree.getCheckedNodes().length).to.equal(0);
+        done();
+      }, 10);
+    }, 10);
   });
 
   it('setCheckedKeys', () => {