fix: Radio.Group triggers multiple change callback issues #1280

components/radio/Group.jsx

@@ -30,6 +30,7 @@ export default {
   },
   data() {
     const { value, defaultValue } = this;
+    this.updatingValue = false;
     return {
       stateValue: value === undefined ? defaultValue : value,
     };
@@ -61,6 +62,7 @@ export default {
   },
   watch: {
     value(val) {
+      this.updatingValue = false;
       this.stateValue = val;
     },
   },
@@ -72,11 +74,13 @@ export default {
         this.stateValue = value;
       }
       // nextTick for https://github.com/vueComponent/ant-design-vue/issues/1280
-      this.$nextTick(() => {
-        if (value !== lastValue) {
+      if (!this.updatingValue && value !== lastValue) {
+        this.updatingValue = true;
         this.$emit('input', value);
         this.$emit('change', ev);
       }
+      this.$nextTick(() => {
+        this.updatingValue = false;
       });
     },
   },

components/radio/__tests__/group.test.js

@@ -80,8 +80,6 @@ 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(() => {
@@ -91,8 +89,6 @@ describe('Radio', () => {
       // controlled component
       wrapper.setProps({ value: 'A' });
       radios.at(1).trigger('change');
-    });
-    await asyncExpect(() => {
       expect(onChange.mock.calls.length).toBe(2);
     });
     await asyncExpect(() => {
@@ -135,9 +131,7 @@ describe('Radio', () => {
     wrapper.vm.$refs.radioGroup.stateValue = 'B';
     radios.at(0).trigger('change');
     expect(onChange.mock.calls.length).toBe(1);
-    await asyncExpect(() => {
     expect(onChangeRadioGroup.mock.calls.length).toBe(1);
-    });
 
     // controlled component
     wrapper.setProps({ value: 'A' });
@@ -159,13 +153,12 @@ describe('Radio', () => {
     // uncontrolled component
     wrapper.vm.$refs.radioGroup.stateValue = 'B';
     radios.at(0).trigger('change');
-    await asyncExpect(() => {
     expect(onChange.mock.calls.length).toBe(1);
-    });
+
+    asyncExpect(() => {
       // controlled component
       wrapper.setProps({ value: 'A' });
       radios.at(1).trigger('change');
-    await asyncExpect(() => {
       expect(onChange.mock.calls.length).toBe(2);
     });
   });