[Slider] Fix override of event.target when preparing change events

docs/src/pages/components/slider/ContinuousSlider.tsx

@@ -9,10 +9,7 @@ import VolumeUp from '@material-ui/icons/VolumeUp';
 export default function ContinuousSlider() {
   const [value, setValue] = React.useState<number>(30);
 
-  const handleChange = (
-    event: React.SyntheticEvent,
-    newValue: number | number[],
-  ) => {
+  const handleChange = (event: Event, newValue: number | number[]) => {
     setValue(newValue as number);
   };
 

docs/src/pages/components/slider/InputSlider.tsx

@@ -16,10 +16,7 @@ export default function InputSlider() {
     30,
   );
 
-  const handleSliderChange = (
-    event: React.SyntheticEvent,
-    newValue: number | number[],
-  ) => {
+  const handleSliderChange = (event: Event, newValue: number | number[]) => {
     setValue(newValue);
   };
 

docs/src/pages/components/slider/NonLinearSlider.tsx

@@ -24,10 +24,7 @@ function calculateValue(value: number) {
 export default function NonLinearSlider() {
   const [value, setValue] = React.useState<number>(10);
 
-  const handleChange = (
-    event: React.SyntheticEvent,
-    newValue: number | number[],
-  ) => {
+  const handleChange = (event: Event, newValue: number | number[]) => {
     if (typeof newValue === 'number') {
       setValue(newValue);
     }

docs/src/pages/components/slider/RangeSlider.tsx

@@ -10,10 +10,7 @@ function valuetext(value: number) {
 export default function RangeSlider() {
   const [value, setValue] = React.useState<number[]>([20, 37]);
 
-  const handleChange = (
-    event: React.SyntheticEvent,
-    newValue: number | number[],
-  ) => {
+  const handleChange = (event: Event, newValue: number | number[]) => {
     setValue(newValue as number[]);
   };
 

docs/translations/api-docs/select/select.json

@@ -16,7 +16,7 @@
     "MenuProps": "Props applied to the <a href=\"/api/menu/\"><code>Menu</code></a> element.",
     "multiple": "If <code>true</code>, <code>value</code> must be an array and the menu will support multiple selections.",
     "native": "If <code>true</code>, the component uses a native <code>select</code> element.",
-    "onChange": "Callback fired when a menu item is selected.<br><br><strong>Signature:</strong><br><code>function(event: object, child?: object) =&gt; void</code><br><em>event:</em> The event source of the callback. You can pull out the new value by accessing <code>event.target.value</code> (any).<br><em>child:</em> The react element that was selected when <code>native</code> is <code>false</code> (default).",
+    "onChange": "Callback fired when a menu item is selected.<br><br><strong>Signature:</strong><br><code>function(event: object, child?: object) =&gt; void</code><br><em>event:</em> The event source of the callback. You can pull out the new value by accessing <code>event.target.value</code> (any). <strong>Warning</strong>: This is a generic event not a change event.<br><em>child:</em> The react element that was selected when <code>native</code> is <code>false</code> (default).",
     "onClose": "Callback fired when the component requests to be closed. Use in controlled mode (see open).<br><br><strong>Signature:</strong><br><code>function(event: object) =&gt; void</code><br><em>event:</em> The event source of the callback.",
     "onOpen": "Callback fired when the component requests to be opened. Use in controlled mode (see open).<br><br><strong>Signature:</strong><br><code>function(event: object) =&gt; void</code><br><em>event:</em> The event source of the callback.",
     "open": "If <code>true</code>, the component is shown. You can only use it when the <code>native</code> prop is <code>false</code> (default).",

docs/translations/api-docs/slider-unstyled/slider-unstyled.json

@@ -17,7 +17,7 @@
     "max": "The maximum allowed value of the slider. Should not be equal to min.",
     "min": "The minimum allowed value of the slider. Should not be equal to max.",
     "name": "Name attribute of the hidden <code>input</code> element.",
-    "onChange": "Callback function that is fired when the slider&#39;s value changed.<br><br><strong>Signature:</strong><br><code>function(event: object, value: number \\| number[]) =&gt; void</code><br><em>event:</em> The event source of the callback. <strong>Warning</strong>: This is a generic event not a change event.<br><em>value:</em> The new value.",
+    "onChange": "Callback function that is fired when the slider&#39;s value changed.<br><br><strong>Signature:</strong><br><code>function(event: object, value: number \\| number[]) =&gt; void</code><br><em>event:</em> The event source of the callback. You can pull out the new value by accessing <code>event.target.value</code> (any). <strong>Warning</strong>: This is a generic event not a change event.<br><em>value:</em> The new value.",
     "onChangeCommitted": "Callback function that is fired when the <code>mouseup</code> is triggered.<br><br><strong>Signature:</strong><br><code>function(event: object, value: number \\| number[]) =&gt; void</code><br><em>event:</em> The event source of the callback. <strong>Warning</strong>: This is a generic event not a change event.<br><em>value:</em> The new value.",
     "orientation": "The component orientation.",
     "scale": "A transformation function, to change the scale of the slider.",

docs/translations/api-docs/slider/slider.json

@@ -17,7 +17,7 @@
     "max": "The maximum allowed value of the slider. Should not be equal to min.",
     "min": "The minimum allowed value of the slider. Should not be equal to max.",
     "name": "Name attribute of the hidden <code>input</code> element.",
-    "onChange": "Callback function that is fired when the slider&#39;s value changed.<br><br><strong>Signature:</strong><br><code>function(event: object, value: number \\| number[]) =&gt; void</code><br><em>event:</em> The event source of the callback. <strong>Warning</strong>: This is a generic event not a change event.<br><em>value:</em> The new value.",
+    "onChange": "Callback function that is fired when the slider&#39;s value changed.<br><br><strong>Signature:</strong><br><code>function(event: object, value: number \\| number[]) =&gt; void</code><br><em>event:</em> The event source of the callback. You can pull out the new value by accessing <code>event.target.value</code> (any). <strong>Warning</strong>: This is a generic event not a change event.<br><em>value:</em> The new value.",
     "onChangeCommitted": "Callback function that is fired when the <code>mouseup</code> is triggered.<br><br><strong>Signature:</strong><br><code>function(event: object, value: number \\| number[]) =&gt; void</code><br><em>event:</em> The event source of the callback. <strong>Warning</strong>: This is a generic event not a change event.<br><em>value:</em> The new value.",
     "orientation": "The component orientation.",
     "scale": "A transformation function, to change the scale of the slider.",

packages/material-ui-unstyled/src/SliderUnstyled/SliderUnstyled.d.ts

@@ -173,17 +173,19 @@ export interface SliderUnstyledTypeMap<P = {}, D extends React.ElementType = 'sp
     /**
      * Callback function that is fired when the slider's value changed.
      *
-     * @param {object} event The event source of the callback. **Warning**: This is a generic event not a change event.
+     * @param {object} event The event source of the callback.
+     * You can pull out the new value by accessing `event.target.value` (any).
+     * **Warning**: This is a generic event not a change event.
      * @param {number | number[]} value The new value.
      */
-    onChange?: (event: React.SyntheticEvent, value: number | number[]) => void;
+    onChange?: (event: Event, value: number | number[]) => void;
     /**
      * Callback function that is fired when the `mouseup` is triggered.
      *
      * @param {object} event The event source of the callback. **Warning**: This is a generic event not a change event.
      * @param {number | number[]} value The new value.
      */
-    onChangeCommitted?: (event: React.SyntheticEvent, value: number | number[]) => void;
+    onChangeCommitted?: (event: React.SyntheticEvent | Event, value: number | number[]) => void;
     /**
      * The component orientation.
      * @default 'horizontal'

packages/material-ui-unstyled/src/SliderUnstyled/SliderUnstyled.js

@@ -230,17 +230,19 @@ const SliderUnstyled = React.forwardRef(function SliderUnstyled(props, ref) {
   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', {
+      // Clone the event to not override `target` of the original event.
+      const nativeEvent = event.nativeEvent || event;
+      const clonedEvent = new nativeEvent.constructor(nativeEvent.type, nativeEvent);
+
+      Object.defineProperty(clonedEvent, 'target', {
         writable: true,
         value: { value, name },
       });
 
-      onChange(event, value);
+      onChange(clonedEvent, value);
     });
 
   const range = Array.isArray(valueDerived);
@@ -459,25 +461,25 @@ const SliderUnstyled = React.forwardRef(function SliderUnstyled(props, ref) {
     stopListening();
   });
 
-  const handleTouchStart = useEventCallback((event) => {
+  const handleTouchStart = useEventCallback((nativeEvent) => {
     // If touch-action: none; is not supported we need to prevent the scroll manually.
     if (!doesSupportTouchActionNone()) {
-      event.preventDefault();
+      nativeEvent.preventDefault();
     }
 
-    const touch = event.changedTouches[0];
+    const touch = nativeEvent.changedTouches[0];
     if (touch != null) {
       // A number that uniquely identifies the current finger in the touch session.
       touchId.current = touch.identifier;
     }
-    const finger = trackFinger(event, touchId);
+    const finger = trackFinger(nativeEvent, touchId);
     const { newValue, activeIndex } = getFingerNewValue({ finger, values, source: valueDerived });
     focusThumb({ sliderRef, activeIndex, setActive });
 
     setValueState(newValue);
 
     if (handleChange) {
-      handleChange(event, newValue);
+      handleChange(nativeEvent, newValue);
     }
 
     const doc = ownerDocument(sliderRef.current);
@@ -892,7 +894,9 @@ SliderUnstyled.propTypes = {
   /**
    * Callback function that is fired when the slider's value changed.
    *
-   * @param {object} event The event source of the callback. **Warning**: This is a generic event not a change event.
+   * @param {object} event The event source of the callback.
+   * You can pull out the new value by accessing `event.target.value` (any).
+   * **Warning**: This is a generic event not a change event.
    * @param {number | number[]} value The new value.
    */
   onChange: PropTypes.func,

packages/material-ui/src/Select/Select.d.ts

@@ -113,6 +113,7 @@ export interface SelectProps<T = unknown>
    *
    * @param {object} event The event source of the callback.
    * You can pull out the new value by accessing `event.target.value` (any).
+   * **Warning**: This is a generic event not a change event.
    * @param {object} [child] The react element that was selected when `native` is `false` (default).
    */
   onChange?: SelectInputProps<T>['onChange'];

packages/material-ui/src/Select/Select.js

@@ -184,6 +184,7 @@ Select.propTypes = {
    *
    * @param {object} event The event source of the callback.
    * You can pull out the new value by accessing `event.target.value` (any).
+   * **Warning**: This is a generic event not a change event.
    * @param {object} [child] The react element that was selected when `native` is `false` (default).
    */
   onChange: PropTypes.func,

packages/material-ui/src/Select/Select.test.js

@@ -1112,4 +1112,23 @@ describe('<Select />', () => {
     );
     expect(document.activeElement).to.equal(getByRole('button'));
   });
+
+  it('should not override the event.target on click events', () => {
+    const handleChange = spy();
+    const handleEvent = spy((event) => event.target);
+    render(
+      <div onClick={handleEvent}>
+        <Select open onChange={handleChange} value="second">
+          <MenuItem value="first" />
+          <MenuItem value="second" />
+        </Select>
+      </div>,
+    );
+
+    const options = screen.getAllByRole('option');
+    options[0].click();
+
+    expect(handleChange.callCount).to.equal(1);
+    expect(handleEvent.returnValues).to.have.members([options[0]]);
+  });
 });

packages/material-ui/src/Select/SelectInput.d.ts

@@ -15,7 +15,7 @@ export interface SelectInputProps<T = unknown> {
   native: boolean;
   onBlur?: React.FocusEventHandler<any>;
   onChange?: (
-    event: React.ChangeEvent<{ name?: string; value: T }>,
+    event: React.ChangeEvent<{ name?: string; value: T; event: Event | React.SyntheticEvent }>,
     child: React.ReactNode
   ) => void;
   onClose?: (event: React.SyntheticEvent) => void;

packages/material-ui/src/Select/SelectInput.js

@@ -189,13 +189,18 @@ const SelectInput = React.forwardRef(function SelectInput(props, ref) {
       setValueState(newValue);
 
       if (onChange) {
-        event.persist();
-        // Preact support, target is read only property on a native event.
-        Object.defineProperty(event, 'target', {
+        // 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
+        // Clone the event to not override `target` of the original event.
+        const nativeEvent = event.nativeEvent || event;
+        const clonedEvent = new nativeEvent.constructor(nativeEvent.type, nativeEvent);
+
+        Object.defineProperty(clonedEvent, 'target', {
           writable: true,
           value: { value: newValue, name },
         });
-        onChange(event, child);
+        onChange(clonedEvent, child);
       }
     }
 

packages/material-ui/src/Slider/Slider.js

@@ -548,7 +548,9 @@ Slider.propTypes = {
   /**
    * Callback function that is fired when the slider's value changed.
    *
-   * @param {object} event The event source of the callback. **Warning**: This is a generic event not a change event.
+   * @param {object} event The event source of the callback.
+   * You can pull out the new value by accessing `event.target.value` (any).
+   * **Warning**: This is a generic event not a change event.
    * @param {number | number[]} value The new value.
    */
   onChange: PropTypes.func,

packages/material-ui/src/Slider/Slider.spec.tsx

@@ -2,8 +2,9 @@ import * as React from 'react';
 import Slider from '@material-ui/core/Slider';
 
 function testOnChange() {
-  function handleSliderChange(event: React.SyntheticEvent, tabsValue: unknown) {}
-  <Slider onChange={handleSliderChange} onChangeCommitted={handleSliderChange} />;
+  function handleSliderChange(event: Event, value: unknown) {}
+  function handleSliderChangeCommitted(event: React.SyntheticEvent | Event, value: unknown) {}
+  <Slider onChange={handleSliderChange} onChangeCommitted={handleSliderChangeCommitted} />;
 
   function handleElementChange(event: React.ChangeEvent) {}
   // @ts-expect-error internally it's whatever even lead to a change in value

packages/material-ui/src/Slider/Slider.test.js

@@ -2,11 +2,17 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { spy, stub } from 'sinon';
 import { expect } from 'chai';
-import { createMount, describeConformanceV5, act, createClientRender, fireEvent } from 'test/utils';
+import {
+  createMount,
+  describeConformanceV5,
+  act,
+  createClientRender,
+  fireEvent,
+  screen,
+} from 'test/utils';
 import { ThemeProvider, createMuiTheme } from '@material-ui/core/styles';
 import { SliderUnstyled } from '@material-ui/unstyled';
-import clsx from 'clsx';
-import Slider, { sliderClasses as classes } from './Slider';
+import Slider, { sliderClasses as classes } from '@material-ui/core/Slider';
 
 function createTouches(touches) {
   return {
@@ -103,7 +109,7 @@ describe('<Slider />', () => {
     expect(handleChangeCommitted.callCount).to.equal(1);
   });
 
-  it('should edge against a dropped mouseup event', () => {
+  it('should hedge against a dropped mouseup event', () => {
     const handleChange = spy();
     const { container } = render(<Slider onChange={handleChange} value={0} />);
     stub(container.firstChild, 'getBoundingClientRect').callsFake(() => ({
@@ -702,14 +708,14 @@ describe('<Slider />', () => {
       function ValueLabelComponent(props) {
         const { value, open } = props;
         return (
-          <span data-testid="value-label" className={clsx({ open })}>
+          <span data-testid="value-label" className={open ? 'open' : ''}>
             {value}
           </span>
         );
       }
       ValueLabelComponent.propTypes = { value: PropTypes.number };
 
-      const screen = render(
+      const { setProps } = render(
         <Slider
           components={{ ValueLabel: ValueLabelComponent }}
           valueLabelDisplay="on"
@@ -719,7 +725,7 @@ describe('<Slider />', () => {
 
       expect(screen.queryByTestId('value-label')).to.have.class('open');
 
-      screen.setProps({
+      setProps({
         valueLabelDisplay: 'off',
       });
 
@@ -944,7 +950,8 @@ describe('<Slider />', () => {
     });
 
     expect(handleChange.callCount).to.equal(1);
-    expect(handleChange.firstCall.returnValue).to.deep.equal({
+    const target = handleChange.firstCall.returnValue;
+    expect(target).to.deep.equal({
       name: 'change-testing',
       value: 4,
     });
@@ -970,4 +977,60 @@ describe('<Slider />', () => {
       expect(getByTestId('value-label')).to.have.text('1010');
     });
   });
+
+  it('should not override the event.target on touch events', () => {
+    const handleChange = spy();
+    const handleNativeEvent = spy((event) => event.target);
+    const handleEvent = spy((event) => event.target);
+    function Test() {
+      React.useEffect(() => {
+        document.addEventListener('touchstart', handleNativeEvent);
+        return () => {
+          document.removeEventListener('touchstart', handleNativeEvent);
+        };
+      });
+
+      return (
+        <div onTouchStart={handleEvent}>
+          <Slider data-testid="slider" value={0} onChange={handleChange} />
+        </div>
+      );
+    }
+    render(<Test />);
+    const slider = screen.getByTestId('slider');
+
+    fireEvent.touchStart(slider, createTouches([{ identifier: 1 }]));
+
+    expect(handleChange.callCount).to.equal(1);
+    expect(handleNativeEvent.returnValues).to.have.members([slider]);
+    expect(handleEvent.returnValues).to.have.members([slider]);
+  });
+
+  it('should not override the event.target on mouse events', () => {
+    const handleChange = spy();
+    const handleNativeEvent = spy((event) => event.target);
+    const handleEvent = spy((event) => event.target);
+    function Test() {
+      React.useEffect(() => {
+        document.addEventListener('mousedown', handleNativeEvent);
+        return () => {
+          document.removeEventListener('mousedown', handleNativeEvent);
+        };
+      });
+
+      return (
+        <div onMouseDown={handleEvent}>
+          <Slider data-testid="slider" value={0} onChange={handleChange} />
+        </div>
+      );
+    }
+    render(<Test />);
+    const slider = screen.getByTestId('slider');
+
+    fireEvent.mouseDown(slider);
+
+    expect(handleChange.callCount).to.equal(1);
+    expect(handleNativeEvent.returnValues).to.have.members([slider]);
+    expect(handleEvent.returnValues).to.have.members([slider]);
+  });
 });