[material-ui][Dialog] Specifying onClick prop disables backdrop clicks about material-ui HOT 7 CLOSED

I believe so! That's pretty much what I was thinking. You don't even need to reorder onClick={handleBackdropClick} since the onClick prop won't be part of others anymore.

Correct. Updated the above diff.

there should be a distinction between clicking the dialog root and clicking the backdrop.

I agree and if I understand the docs correctly, that's the use case that (now deprecated) onBackdropClick and onClose (with reason) handle.

I mean why is the dialog root's onClick handling the backdrop's click event?

DialogRoot is a Styled Modal and the underlying Modal component has the Pop Up(Modal) and Backdrop component with it, By passing onClick to DialogRoot eventually to Backdrop, callback is fired back when Backdrop is clicked to close it.

from material-ui.

I agree it's a bug.

from material-ui.

Invoke it from within handleBackdropClick here (if provided in props) instead of grouping it with ...others.

Where to call handleBackdropClick then?

from material-ui.

Would the following fix work:

--- 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,9 @@ 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;

However, I believe there should be a distinction between clicking the dialog root and clicking the backdrop.

from material-ui.

I believe so! That's pretty much what I was thinking. You don't even need to reorder onClick={handleBackdropClick} since the onClick prop won't be part of others anymore.

there should be a distinction between clicking the dialog root and clicking the backdrop.

I agree and if I understand the docs correctly, that's the use case that (now deprecated) onBackdropClick and onClose (with reason) handle.

from material-ui.

I believe so! That's pretty much what I was thinking. You don't even need to reorder onClick={handleBackdropClick} since the onClick prop won't be part of others anymore.

Correct. Updated the above diff.

there should be a distinction between clicking the dialog root and clicking the backdrop.

I agree and if I understand the docs correctly, that's the use case that (now deprecated) onBackdropClick and onClose (with reason) handle.

I mean why is the dialog root's onClick handling the backdrop's click event?

from material-ui.

Ah I see what you're saying. Good question. Not sure of the design decision there. Found the commit that put it there though.

Would an alternative be to wire this up through the Backdrop onClick prop? I haven't explored this component much yet.

from material-ui.