From 418fb02c5a37c518ca9bf954a0c1eacfbb69d53d Mon Sep 17 00:00:00 2001
From: Ryan Burr <ryan.burr2@gmail.com>
Date: Mon, 15 Apr 2024 13:50:36 -0400
Subject: [PATCH] [material-ui][Dialog] Prevent onClick on the root element
 from being overwritten (#41881)

Signed-off-by: Ryan Burr <ryan.burr2@gmail.com>
Co-authored-by: ZeeshanTamboli <zeeshan.tamboli@gmail.com>
---
 packages/mui-material/src/Dialog/Dialog.js    |  9 ++++++++
 .../mui-material/src/Dialog/Dialog.test.js    | 22 +++++++++++++++++++
 2 files changed, 31 insertions(+)

diff --git a/packages/mui-material/src/Dialog/Dialog.js b/packages/mui-material/src/Dialog/Dialog.js
index 927c9b0f44e244..b88a9103d01389 100644
--- a/packages/mui-material/src/Dialog/Dialog.js
+++ b/packages/mui-material/src/Dialog/Dialog.js
@@ -182,6 +182,7 @@ const Dialog = React.forwardRef(function Dialog(inProps, ref) {
     fullWidth = false,
     maxWidth = 'sm',
     onBackdropClick,
+    onClick,
     onClose,
     open,
     PaperComponent = Paper,
@@ -211,6 +212,10 @@ const Dialog = React.forwardRef(function Dialog(inProps, ref) {
     backdropClick.current = event.target === event.currentTarget;
   };
   const handleBackdropClick = (event) => {
+    if (onClick) {
+      onClick(event);
+    }
+
     // Ignore the events not coming from the "backdrop".
     if (!backdropClick.current) {
       return;
@@ -360,6 +365,10 @@ Dialog.propTypes /* remove-proptypes */ = {
    * @deprecated Use the `onClose` prop with the `reason` argument to handle the `backdropClick` events.
    */
   onBackdropClick: PropTypes.func,
+  /**
+   * @ignore
+   */
+  onClick: PropTypes.func,
   /**
    * Callback fired when the component requests to be closed.
    *
diff --git a/packages/mui-material/src/Dialog/Dialog.test.js b/packages/mui-material/src/Dialog/Dialog.test.js
index 7690dd907bf183..e17f7ac397d7de 100644
--- a/packages/mui-material/src/Dialog/Dialog.test.js
+++ b/packages/mui-material/src/Dialog/Dialog.test.js
@@ -187,6 +187,28 @@ describe('<Dialog />', () => {
       expect(onClose.callCount).to.equal(1);
     });
 
+    it('calls onBackdropClick when onClick callback also exists', () => {
+      const onBackdropClick = spy();
+      const onClick = spy();
+      render(
+        <Dialog
+          onClick={onClick}
+          onClose={(event, reason) => {
+            if (reason === 'backdropClick') {
+              onBackdropClick();
+            }
+          }}
+          open
+        >
+          foo
+        </Dialog>,
+      );
+
+      clickBackdrop(screen);
+      expect(onBackdropClick.callCount).to.equal(1);
+      expect(onClick.callCount).to.equal(1);
+    });
+
     it('should ignore the backdrop click if the event did not come from the backdrop', () => {
       const onBackdropClick = spy();
       const { getByRole } = render(