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),
});
})}
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('', () => {
);
});
- describe('children radios fire change event', () => {
- let wrapper;
-
- beforeEach(() => {
- wrapper = shallow(
-
+ describe('prop: onChange', () => {
+ it('should fire onChange', () => {
+ const handleChange = spy();
+ const wrapper = shallow(
+
,
);
- });
- 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(
+
+
+
+ ,
+ );
+
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(
+
+
+
+ ,
+ );
+
+ 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, pred: any) {
* @returns {function|null}
*/
export function createChainedFunction(...funcs: Array) {
- 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.',