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

Author: tangjinzhou

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
+      if (!this.updatingValue && value !== lastValue) {
+        this.updatingValue = true;
+        this.$emit('input', value);
+        this.$emit('change', ev);
+      }
       this.$nextTick(() => {
-        if (value !== lastValue) {
-          this.$emit('input', value);
-          this.$emit('change', ev);
-        }
+        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);
-    });
+    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);
-    });
-    // controlled component
-    wrapper.setProps({ value: 'A' });
-    radios.at(1).trigger('change');
-    await asyncExpect(() => {
+    expect(onChange.mock.calls.length).toBe(1);
+
+    asyncExpect(() => {
+      // controlled component
+      wrapper.setProps({ value: 'A' });
+      radios.at(1).trigger('change');
       expect(onChange.mock.calls.length).toBe(2);
     });
   });