fix: radio emit two change event #1280

Author: tangjinzhou

components/radio/Group.jsx

@@ -71,10 +71,13 @@ export default {
       if (!hasProp(this, 'value')) {
         this.stateValue = value;
       }
-      if (value !== lastValue) {
-        this.$emit('input', value);
-        this.$emit('change', ev);
-      }
+      // nextTick for https://github.com/vueComponent/ant-design-vue/issues/1280
+      this.$nextTick(() => {
+        if (value !== lastValue) {
+          this.$emit('input', value);
+          this.$emit('change', ev);
+        }
+      });
     },
   },
   render() {

components/radio/__tests__/group.test.js

@@ -80,6 +80,8 @@ describe('Radio', () => {
       wrapper.vm.$refs.radioGroup.stateValue = 'B';
       // wrapper.setData({ value: 'B' })
       radios.at(0).trigger('change');
+    });
+    await asyncExpect(() => {
       expect(onChange.mock.calls.length).toBe(1);
     });
     await asyncExpect(() => {
@@ -89,6 +91,8 @@ describe('Radio', () => {
       // controlled component
       wrapper.setProps({ value: 'A' });
       radios.at(1).trigger('change');
+    });
+    await asyncExpect(() => {
       expect(onChange.mock.calls.length).toBe(2);
     });
     await asyncExpect(() => {
@@ -131,15 +135,17 @@ describe('Radio', () => {
     wrapper.vm.$refs.radioGroup.stateValue = 'B';
     radios.at(0).trigger('change');
     expect(onChange.mock.calls.length).toBe(1);
-    expect(onChangeRadioGroup.mock.calls.length).toBe(1);
+    await asyncExpect(() => {
+      expect(onChangeRadioGroup.mock.calls.length).toBe(1);
+    });
 
     // controlled component
     wrapper.setProps({ value: 'A' });
     radios.at(1).trigger('change');
     expect(onChange.mock.calls.length).toBe(2);
   });
 
-  it('Trigger onChange when both of radioButton and radioGroup exists', () => {
+  it('Trigger onChange when both of radioButton and radioGroup exists', async () => {
     const onChange = jest.fn();
     const props = {};
     const wrapper = mount(
@@ -153,12 +159,15 @@ describe('Radio', () => {
     // uncontrolled component
     wrapper.vm.$refs.radioGroup.stateValue = 'B';
     radios.at(0).trigger('change');
-    expect(onChange.mock.calls.length).toBe(1);
-
+    await asyncExpect(() => {
+      expect(onChange.mock.calls.length).toBe(1);
+    });
     // controlled component
     wrapper.setProps({ value: 'A' });
     radios.at(1).trigger('change');
-    expect(onChange.mock.calls.length).toBe(2);
+    await asyncExpect(() => {
+      expect(onChange.mock.calls.length).toBe(2);
+    });
   });
 
   // it('should only trigger once when in group with options', () => {