[Dialog][Modal] Remove disableBackdropClick (#23607)

Author: eps1lon

docs/pages/api-docs/dialog.md

@@ -32,7 +32,6 @@ The `MuiDialog` name can be used for providing [default props](/customization/gl
 | <span class="prop-name">aria-labelledby</span> | <span class="prop-type">string</span> |  | The id(s) of the element(s) that label the dialog. |
 | <span class="prop-name">children</span> | <span class="prop-type">node</span> |  | Dialog children, usually the included sub-components. |
 | <span class="prop-name">classes</span> | <span class="prop-type">object</span> |  | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. |
-| <span class="prop-name">disableBackdropClick</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If `true`, clicking the backdrop will not fire the `onClose` callback. |
 | <span class="prop-name">disableEscapeKeyDown</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If `true`, hitting escape will not fire the `onClose` callback. |
 | <span class="prop-name">fullScreen</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If `true`, the dialog is full-screen. |
 | <span class="prop-name">fullWidth</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If `true`, the dialog stretches to `maxWidth`.<br>Notice that the dialog width grow is limited by the default margin. |

docs/pages/api-docs/modal.md

@@ -42,7 +42,6 @@ This component shares many concepts with [react-overlays](https://react-bootstra
 | <span class="prop-name">closeAfterTransition</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | When set to true the Modal waits until a nested Transition is completed before closing. |
 | <span class="prop-name">container</span> | <span class="prop-type">HTML element<br>&#124;&nbsp;func</span> |  | A HTML element or function that returns one. The `container` will have the portal children appended to it.<br>By default, it uses the body of the top-level document object, so it's simply `document.body` most of the time. |
 | <span class="prop-name">disableAutoFocus</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If `true`, the modal will not automatically shift focus to itself when it opens, and replace it to the last focused element when it closes. This also works correctly with any modal children that have the `disableAutoFocus` prop.<br>Generally this should never be set to `true` as it makes the modal less accessible to assistive technologies, like screen readers. |
-| <span class="prop-name">disableBackdropClick</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If `true`, clicking the backdrop will not fire `onClose`. |
 | <span class="prop-name">disableEnforceFocus</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If `true`, the modal will not prevent focus from leaving the modal while open.<br>Generally this should never be set to `true` as it makes the modal less accessible to assistive technologies, like screen readers. |
 | <span class="prop-name">disableEscapeKeyDown</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If `true`, hitting escape will not fire `onClose`. |
 | <span class="prop-name">disablePortal</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | The `children` will be inside the DOM hierarchy of the parent component. |

docs/src/pages/components/dialogs/ConfirmationDialog.js

@@ -61,8 +61,6 @@ function ConfirmationDialogRaw(props) {
 
   return (
     <Dialog
-      disableBackdropClick
-      disableEscapeKeyDown
       maxWidth="xs"
       TransitionProps={{ onEntering: handleEntering }}
       aria-labelledby="confirmation-dialog-title"

docs/src/pages/components/dialogs/ConfirmationDialog.tsx

@@ -69,8 +69,6 @@ function ConfirmationDialogRaw(props: ConfirmationDialogRawProps) {
 
   return (
     <Dialog
-      disableBackdropClick
-      disableEscapeKeyDown
       maxWidth="xs"
       TransitionProps={{ onEntering: handleEntering }}
       aria-labelledby="confirmation-dialog-title"

docs/src/pages/components/selects/DialogSelect.js

@@ -35,19 +35,16 @@ export default function DialogSelect() {
     setOpen(true);
   };
 
-  const handleClose = () => {
-    setOpen(false);
+  const handleClose = (event, reason) => {
+    if (reason !== 'backdropClick') {
+      setOpen(false);
+    }
   };
 
   return (
     <div>
       <Button onClick={handleClickOpen}>Open select dialog</Button>
-      <Dialog
-        disableBackdropClick
-        disableEscapeKeyDown
-        open={open}
-        onClose={handleClose}
-      >
+      <Dialog disableEscapeKeyDown open={open} onClose={handleClose}>
         <DialogTitle>Fill the form</DialogTitle>
         <DialogContent>
           <form className={classes.container}>

docs/src/pages/components/selects/DialogSelect.tsx

@@ -37,19 +37,19 @@ export default function DialogSelect() {
     setOpen(true);
   };
 
-  const handleClose = () => {
-    setOpen(false);
+  const handleClose = (
+    event: React.SyntheticEvent<unknown>,
+    reason?: string,
+  ) => {
+    if (reason !== 'backdropClick') {
+      setOpen(false);
+    }
   };
 
   return (
     <div>
       <Button onClick={handleClickOpen}>Open select dialog</Button>
-      <Dialog
-        disableBackdropClick
-        disableEscapeKeyDown
-        open={open}
-        onClose={handleClose}
-      >
+      <Dialog disableEscapeKeyDown open={open} onClose={handleClose}>
         <DialogTitle>Fill the form</DialogTitle>
         <DialogContent>
           <form className={classes.container}>

docs/src/pages/guides/migration-v4/migration-v4.md

@@ -412,6 +412,21 @@ const classes = makeStyles(theme => ({
   />
   ```
 
+- Remove the `disableBackdropClick` prop because redundant.
+  Ignore close events from `onClose` when `reason === 'backdropClick'` instead.
+
+  ```diff
+  <Dialog
+  - disableBackdropClick
+  - onClose={handleClose}
+  + onClose={(event, reason) => {
+  +   if (reason !== 'backdropClick') {
+  +     onClose(event, reason);
+  +   }
+  + }}
+  />
+  ```
+
 - [withMobileDialog] Remove this higher-order component. The hook API allows a simpler and more flexible solution:
 
   ```diff
@@ -589,6 +604,35 @@ const classes = makeStyles(theme => ({
 
 ### Modal
 
+- Remove the `disableBackdropClick` prop because redundant.
+  Ignore close events from `onClose` when `reason === 'backdropClick'` instead.
+
+  ```diff
+  <Modal
+  - disableBackdropClick
+  - onClose={handleClose}
+  + onClose={(event, reason) => {
+  +   if (reason !== 'backdropClick') {
+  +     onClose(event, reason);
+  +   }
+  + }}
+  />
+  ```
+
+- Remove the `onEscapeKeyDown` prop because redundant.
+  Use `onClose` with `reason === "escapeKeyDown"` instead.
+
+  ```diff
+  <Modal
+  - onEscapeKeyDown={handleEscapeKeyDown}
+  + onClose={(event, reason) => {
+  +   if (reason === 'escapeKeyDown') {
+  +     handleEscapeKeyDown(event);
+  +   }
+  + }}
+  />
+  ```
+
 - Remove `onRendered` prop.
   Depending on your use case either use a [callback ref](https://reactjs.org/docs/refs-and-the-dom.html#callback-refs) on the child element or an effect hook in the child component.
 

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

@@ -53,11 +53,6 @@ export interface DialogProps
     /** Styles applied to the `Paper` component if `fullScreen={true}`. */
     paperFullScreen?: string;
   };
-  /**
-   * If `true`, clicking the backdrop will not fire the `onClose` callback.
-   * @default false
-   */
-  disableBackdropClick?: boolean;
   /**
    * If `true`, hitting escape will not fire the `onClose` callback.
    * @default false

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

@@ -145,7 +145,6 @@ const Dialog = React.forwardRef(function Dialog(props, ref) {
     children,
     classes,
     className,
-    disableBackdropClick = false,
     disableEscapeKeyDown = false,
     fullScreen = false,
     fullWidth = false,
@@ -182,7 +181,7 @@ const Dialog = React.forwardRef(function Dialog(props, ref) {
       onBackdropClick(event);
     }
 
-    if (!disableBackdropClick && onClose) {
+    if (onClose) {
       onClose(event, 'backdropClick');
     }
   };
@@ -196,7 +195,6 @@ const Dialog = React.forwardRef(function Dialog(props, ref) {
         ...BackdropProps,
       }}
       closeAfterTransition
-      disableBackdropClick={disableBackdropClick}
       disableEscapeKeyDown={disableEscapeKeyDown}
       onClose={onClose}
       open={open}
@@ -272,11 +270,6 @@ Dialog.propTypes = {
    * @ignore
    */
   className: PropTypes.string,
-  /**
-   * If `true`, clicking the backdrop will not fire the `onClose` callback.
-   * @default false
-   */
-  disableBackdropClick: PropTypes.bool,
   /**
    * If `true`, hitting escape will not fire the `onClose` callback.
    * @default false

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

@@ -115,17 +115,26 @@ describe('<Dialog />', () => {
   });
 
   it('can ignore backdrop click and Esc keydown', () => {
+    function DialogWithBackdropClickDisabled(props) {
+      const { onClose, ...other } = props;
+      function handleClose(event, reason) {
+        if (reason !== 'backdropClick') {
+          onClose(event, reason);
+        }
+      }
+
+      return <Dialog onClose={handleClose} {...other} />;
+    }
     const onClose = spy();
     const { getByRole } = render(
-      <Dialog
+      <DialogWithBackdropClickDisabled
         open
-        disableBackdropClick
         disableEscapeKeyDown
         onClose={onClose}
         transitionDuration={0}
       >
         foo
-      </Dialog>,
+      </DialogWithBackdropClickDisabled>,
     );
     const dialog = getByRole('dialog');
     expect(dialog).not.to.equal(null);