diff --git a/packages/material-ui/src/Slider/Slider.js b/packages/material-ui/src/Slider/Slider.js index 671227b57814af..fae6f8ba959bb3 100644 --- a/packages/material-ui/src/Slider/Slider.js +++ b/packages/material-ui/src/Slider/Slider.js @@ -405,6 +405,22 @@ const Slider = React.forwardRef(function Slider(props, ref) { name: 'Slider', }); + const handleChange = + onChange && + ((event, value) => { + if (!(event instanceof Event)) event.persist(); + + // Redefine target to allow name and value to be read. + // This allows seamless integration with the most popular form libraries. + // https://github.com/mui-org/material-ui/issues/13485#issuecomment-676048492 + Object.defineProperty(event, 'target', { + writable: true, + value: { value, name }, + }); + + onChange(event, value); + }); + const range = Array.isArray(valueDerived); let values = range ? valueDerived.slice().sort(asc) : [valueDerived]; values = values.map((value) => clamp(value, min, max)); @@ -538,8 +554,8 @@ const Slider = React.forwardRef(function Slider(props, ref) { setValueState(newValue); setFocusVisible(index); - if (onChange) { - onChange(event, newValue); + if (handleChange) { + handleChange(event, newValue); } if (onChangeCommitted) { onChangeCommitted(event, newValue); @@ -625,8 +641,8 @@ const Slider = React.forwardRef(function Slider(props, ref) { focusThumb({ sliderRef, activeIndex, setActive }); setValueState(newValue); - if (onChange) { - onChange(nativeEvent, newValue); + if (handleChange) { + handleChange(nativeEvent, newValue); } }); @@ -674,8 +690,8 @@ const Slider = React.forwardRef(function Slider(props, ref) { setValueState(newValue); - if (onChange) { - onChange(event, newValue); + if (handleChange) { + handleChange(event, newValue); } const doc = ownerDocument(sliderRef.current); @@ -725,8 +741,8 @@ const Slider = React.forwardRef(function Slider(props, ref) { setValueState(newValue); - if (onChange) { - onChange(event, newValue); + if (handleChange) { + handleChange(event, newValue); } const doc = ownerDocument(sliderRef.current); diff --git a/packages/material-ui/src/Slider/Slider.test.js b/packages/material-ui/src/Slider/Slider.test.js index 01a30e0dd3dde8..6053cec9cc62eb 100644 --- a/packages/material-ui/src/Slider/Slider.test.js +++ b/packages/material-ui/src/Slider/Slider.test.js @@ -700,6 +700,27 @@ describe('', () => { expect(container.querySelectorAll(`.${classes.mark}[data-index="2"]`).length).to.equal(1); }); + it('should pass "name" and "value" as part of the event.target for onChange', () => { + const handleChange = stub().callsFake((event) => event.target); + const { getByRole } = render( + , + ); + const thumb = getByRole('slider'); + + act(() => { + thumb.focus(); + fireEvent.keyDown(thumb, { + key: 'ArrowRight', + }); + }); + + expect(handleChange.callCount).to.equal(1); + expect(handleChange.firstCall.returnValue).to.deep.equal({ + name: 'change-testing', + value: 4, + }); + }); + describe('prop: ValueLabelComponent', () => { it('receives the formatted value', () => { function ValueLabelComponent(props) {