From db5c3ebfb8d7c58d5764ba0ba5877787fe4ba276 Mon Sep 17 00:00:00 2001
From: Olivier Tassinari <olivier.tassinari@gmail.com>
Date: Sun, 10 Jun 2018 00:38:57 +0200
Subject: [PATCH] [RadioGroup] Fix onChange chaining

---
 .../material-ui/src/RadioGroup/RadioGroup.js  |  4 +-
 .../src/RadioGroup/RadioGroup.test.js         | 48 ++++++++++++-------
 packages/material-ui/src/utils/helpers.js     |  6 ++-
 3 files changed, 39 insertions(+), 19 deletions(-)

diff --git a/packages/material-ui/src/RadioGroup/RadioGroup.js b/packages/material-ui/src/RadioGroup/RadioGroup.js
index 1c9b58f08fd3f5..aa13579676c1c0 100644
--- a/packages/material-ui/src/RadioGroup/RadioGroup.js
+++ b/packages/material-ui/src/RadioGroup/RadioGroup.js
@@ -3,7 +3,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import FormGroup from '../FormGroup';
-import { find } from '../utils/helpers';
+import { createChainedFunction, find } from '../utils/helpers';
 
 class RadioGroup extends React.Component {
   radios = [];
@@ -56,7 +56,7 @@ class RadioGroup extends React.Component {
               }
             },
             checked: value === child.props.value,
-            onChange: this.handleRadioChange,
+            onChange: createChainedFunction(child.props.onChange, this.handleRadioChange),
           });
         })}
       </FormGroup>
diff --git a/packages/material-ui/src/RadioGroup/RadioGroup.test.js b/packages/material-ui/src/RadioGroup/RadioGroup.test.js
index c5947b5ac34dc7..1e426b9015aff8 100644
--- a/packages/material-ui/src/RadioGroup/RadioGroup.test.js
+++ b/packages/material-ui/src/RadioGroup/RadioGroup.test.js
@@ -117,35 +117,51 @@ describe('<RadioGroup />', () => {
     );
   });
 
-  describe('children radios fire change event', () => {
-    let wrapper;
-
-    beforeEach(() => {
-      wrapper = shallow(
-        <RadioGroup value="">
+  describe('prop: onChange', () => {
+    it('should fire onChange', () => {
+      const handleChange = spy();
+      const wrapper = shallow(
+        <RadioGroup value="" onChange={handleChange}>
           <Radio />
           <Radio />
         </RadioGroup>,
       );
-    });
 
-    it('should fire onChange', () => {
       const internalRadio = wrapper.children().first();
       const event = { target: { value: 'woofRadioGroup' } };
-      const onChangeSpy = spy();
-      wrapper.setProps({ onChange: onChangeSpy });
-
       internalRadio.simulate('change', event, true);
-      assert.strictEqual(onChangeSpy.callCount, 1);
-      assert.strictEqual(onChangeSpy.calledWith(event), true);
+      assert.strictEqual(handleChange.callCount, 1);
+      assert.strictEqual(handleChange.calledWith(event), true);
     });
 
     it('should not fire onChange if not checked', () => {
+      const handleChange = spy();
+      const wrapper = shallow(
+        <RadioGroup value="" onChange={handleChange}>
+          <Radio />
+          <Radio />
+        </RadioGroup>,
+      );
+
       const internalRadio = wrapper.children().first();
-      const onChangeSpy = spy();
-      wrapper.setProps({ onChange: onChangeSpy });
       internalRadio.simulate('change', { target: { value: 'woofRadioGroup' } }, false);
-      assert.strictEqual(onChangeSpy.callCount, 0);
+      assert.strictEqual(handleChange.callCount, 0);
+    });
+
+    it('should chain the onChange property', () => {
+      const handleChange1 = spy();
+      const handleChange2 = spy();
+      const wrapper = shallow(
+        <RadioGroup value="" onChange={handleChange1}>
+          <Radio onChange={handleChange2} />
+          <Radio />
+        </RadioGroup>,
+      );
+
+      const internalRadio = wrapper.children().first();
+      internalRadio.simulate('change', { target: { value: 'woofRadioGroup' } }, true);
+      assert.strictEqual(handleChange1.callCount, 1);
+      assert.strictEqual(handleChange2.callCount, 1);
     });
   });
 
diff --git a/packages/material-ui/src/utils/helpers.js b/packages/material-ui/src/utils/helpers.js
index be095a698888d5..e24930b05836f8 100644
--- a/packages/material-ui/src/utils/helpers.js
+++ b/packages/material-ui/src/utils/helpers.js
@@ -47,8 +47,12 @@ export function find(arr: Array<any>, pred: any) {
  * @returns {function|null}
  */
 export function createChainedFunction(...funcs: Array<any>) {
-  return funcs.filter(func => func != null).reduce(
+  return funcs.reduce(
     (acc, func) => {
+      if (func == null) {
+        return acc;
+      }
+
       warning(
         typeof func === 'function',
         'Material-UI: invalid Argument Type, must only provide functions, undefined, or null.',