[material-ui][Modal] Fix event handlers overriding behaviour (#43757)

Author: sai6855

packages/mui-material/src/Modal/Modal.js

@@ -156,6 +156,7 @@ const Modal = React.forwardRef(function Modal(inProps, ref) {
   }
 
   const externalForwardedProps = {
+    ...other,
     slots: {
       root: components.Root,
       backdrop: components.Backdrop,
@@ -218,7 +219,7 @@ const Modal = React.forwardRef(function Modal(inProps, ref) {
        * is not meant for humans to interact with directly.
        * https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/no-static-element-interactions.md
        */}
-      <RootSlot {...rootProps} {...other}>
+      <RootSlot {...rootProps}>
         {!hideBackdrop && BackdropComponent ? (
           <BackdropSlot {...backdropProps} ref={backdropRef} />
         ) : null}

packages/mui-material/src/Modal/Modal.test.js

@@ -880,4 +880,20 @@ describe('<Modal />', () => {
       );
     }).not.toErrorDev();
   });
+
+  it('should not override default onKeyDown', async () => {
+    const handleKeyDown = spy();
+    const handleClose = spy();
+
+    const { user } = render(
+      <Modal open onKeyDown={handleKeyDown} onClose={handleClose}>
+        <div tabIndex={-1} />
+      </Modal>,
+    );
+
+    await user.keyboard('{Escape}');
+
+    expect(handleKeyDown).to.have.property('callCount', 1);
+    expect(handleClose).to.have.property('callCount', 1);
+  });
 });