[Dialog] Fix body scrollbar close behavior (#21951)

mui · Jul 27, 2020 · ea3e66f · ea3e66f
1 parent 73ae61f
commit ea3e66f
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 14 deletions.
diff --git a/packages/material-ui/src/ClickAwayListener/ClickAwayListener.js b/packages/material-ui/src/ClickAwayListener/ClickAwayListener.js
@@ -9,10 +9,10 @@ function mapEventPropToEvent(eventProp) {
   return eventProp.substring(2).toLowerCase();
 }
 
-function clickedRootScrollbar(event) {
+function clickedRootScrollbar(event, doc) {
   return (
-    document.documentElement.clientWidth < event.clientX ||
-    document.documentElement.clientHeight < event.clientY
+    doc.documentElement.clientWidth < event.clientX ||
+    doc.documentElement.clientHeight < event.clientY
   );
 }
 
@@ -54,10 +54,12 @@ function ClickAwayListener(props) {
     const insideReactTree = syntheticEventRef.current;
     syntheticEventRef.current = false;
 
+    const doc = ownerDocument(nodeRef.current);
+
     // 1. IE 11 support, which trigger the handleClickAway even after the unbind
     // 2. The child might render null.
     // 3. Behave like a blur listener.
-    if (!mountedRef.current || !nodeRef.current || clickedRootScrollbar(event)) {
+    if (!mountedRef.current || !nodeRef.current || clickedRootScrollbar(event, doc)) {
       return;
     }
 
@@ -73,8 +75,6 @@ function ClickAwayListener(props) {
     if (event.composedPath) {
       insideDOM = event.composedPath().indexOf(nodeRef.current) > -1;
     } else {
-      // TODO v6 remove dead logic https://caniuse.com/#search=composedPath.
-      const doc = ownerDocument(nodeRef.current);
       insideDOM =
         !doc.documentElement.contains(event.target) || nodeRef.current.contains(event.target);
     }

diff --git a/packages/material-ui/src/Dialog/Dialog.js b/packages/material-ui/src/Dialog/Dialog.js
@@ -173,15 +173,9 @@ const Dialog = React.forwardRef(function Dialog(props, ref) {
 
   const mouseDownTarget = React.useRef();
   const handleMouseDown = (event) => {
-    mouseDownTarget.current = event.target;
+    mouseDownTarget.current = event.currentTarget;
   };
   const handleBackdropClick = (event) => {
-    // Ignore the events not coming from the "backdrop"
-    // We don't want to close the dialog when clicking the dialog content.
-    if (event.target !== event.currentTarget) {
-      return;
-    }
-
     // Make sure the event starts and ends on the same DOM element.
     if (event.target !== mouseDownTarget.current) {
       return;
@@ -213,6 +207,7 @@ const Dialog = React.forwardRef(function Dialog(props, ref) {
       onClose={onClose}
       open={open}
       ref={ref}
+      onClick={handleBackdropClick}
       {...other}
     >
       <TransitionComponent
@@ -233,7 +228,6 @@ const Dialog = React.forwardRef(function Dialog(props, ref) {
         {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}
         <div
           className={clsx(classes.container, classes[`scroll${capitalize(scroll)}`])}
-          onMouseUp={handleBackdropClick}
           onMouseDown={handleMouseDown}
           data-mui-test="FakeBackdrop"
         >