[dialog][modal] Remove disableEscapeKeyDown prop

docs/data/material/components/selects/DialogSelect.js

@@ -23,16 +23,20 @@ export default function DialogSelect() {
     setOpen(true);
   };
 
-  const handleClose = (event, reason) => {
-    if (reason !== 'backdropClick') {
+  const handleDialogClose = (_event, reason) => {
+    if (!['backdropClick', 'escapeKeyDown'].includes(reason)) {
       setOpen(false);
     }
   };
 
+  const handleActionButtonClick = () => {
+    setOpen(false);
+  };
+
   return (
     <div>
       <Button onClick={handleClickOpen}>Open select dialog</Button>
-      <Dialog disableEscapeKeyDown open={open} onClose={handleClose}>
+      <Dialog open={open} onClose={handleDialogClose}>
         <DialogTitle>Fill the form</DialogTitle>
         <DialogContent>
           <Box component="form" sx={{ display: 'flex', flexWrap: 'wrap' }}>
@@ -70,8 +74,8 @@ export default function DialogSelect() {
           </Box>
         </DialogContent>
         <DialogActions>
-          <Button onClick={handleClose}>Cancel</Button>
-          <Button onClick={handleClose}>Ok</Button>
+          <Button onClick={handleActionButtonClick}>Cancel</Button>
+          <Button onClick={handleActionButtonClick}>Ok</Button>
         </DialogActions>
       </Dialog>
     </div>

docs/data/material/components/selects/DialogSelect.tsx

@@ -23,16 +23,23 @@ export default function DialogSelect() {
     setOpen(true);
   };
 
-  const handleClose = (event: React.SyntheticEvent<unknown>, reason?: string) => {
-    if (reason !== 'backdropClick') {
+  const handleDialogClose = (
+    _event: React.SyntheticEvent<unknown>,
+    reason: string,
+  ) => {
+    if (!['backdropClick', 'escapeKeyDown'].includes(reason)) {
       setOpen(false);
     }
   };
 
+  const handleActionButtonClick = () => {
+    setOpen(false);
+  };
+
   return (
     <div>
       <Button onClick={handleClickOpen}>Open select dialog</Button>
-      <Dialog disableEscapeKeyDown open={open} onClose={handleClose}>
+      <Dialog open={open} onClose={handleDialogClose}>
         <DialogTitle>Fill the form</DialogTitle>
         <DialogContent>
           <Box component="form" sx={{ display: 'flex', flexWrap: 'wrap' }}>
@@ -70,8 +77,8 @@ export default function DialogSelect() {
           </Box>
         </DialogContent>
         <DialogActions>
-          <Button onClick={handleClose}>Cancel</Button>
-          <Button onClick={handleClose}>Ok</Button>
+          <Button onClick={handleActionButtonClick}>Cancel</Button>
+          <Button onClick={handleActionButtonClick}>Ok</Button>
         </DialogActions>
       </Dialog>
     </div>

docs/data/material/migration/upgrade-to-v9/upgrade-to-v9.md

@@ -23,3 +23,28 @@ The steps you need to take to migrate from Material UI v7 to v9 are described
 This list is a work in progress.
 Expect updates as new breaking changes are introduced.
 :::
+
+### Dialog & Modal
+
+The `disableEscapeKeyDown` prop has been removed. The same behavior could be achieved
+by checking the value of the `reason` argument in `onClose`:
+
+```diff
+  const [open, setOpen] = React.useState(true);
+- const handleClose = () => {
+-   setOpen(false);
+- };
++ const handleClose = (_event: React.SyntheticEvent<unknown>, reason: string) => {
++   if (reason !== 'escapeKeyDown') {
++     setOpen(false);
++   }
++ };
+  return (
+-  <Dialog open={open} disableEscapeKeyDown onClose={handleClose}>
++  <Dialog open={open} onClose={handleClose}>
+    {/* ... */}
+  </Dialog>
+  );
+```
+
+The `Modal` change is the same.

docs/pages/material-ui/api/dialog.json

@@ -18,7 +18,6 @@
     },
     "children": { "type": { "name": "node" } },
     "classes": { "type": { "name": "object" }, "additionalInfo": { "cssApi": true } },
-    "disableEscapeKeyDown": { "type": { "name": "bool" }, "default": "false" },
     "fullScreen": { "type": { "name": "bool" }, "default": "false" },
     "fullWidth": { "type": { "name": "bool" }, "default": "false" },
     "maxWidth": {

docs/pages/material-ui/api/modal.json

@@ -34,7 +34,6 @@
     "container": { "type": { "name": "union", "description": "HTML element<br>&#124;&nbsp;func" } },
     "disableAutoFocus": { "type": { "name": "bool" }, "default": "false" },
     "disableEnforceFocus": { "type": { "name": "bool" }, "default": "false" },
-    "disableEscapeKeyDown": { "type": { "name": "bool" }, "default": "false" },
     "disablePortal": { "type": { "name": "bool" }, "default": "false" },
     "disableRestoreFocus": { "type": { "name": "bool" }, "default": "false" },
     "disableScrollLock": { "type": { "name": "bool" }, "default": "false" },

docs/translations/api-docs/dialog/dialog.json

@@ -11,9 +11,6 @@
     },
     "children": { "description": "Dialog children, usually the included sub-components." },
     "classes": { "description": "Override or extend the styles applied to the component." },
-    "disableEscapeKeyDown": {
-      "description": "If <code>true</code>, hitting escape will not fire the <code>onClose</code> callback."
-    },
     "fullScreen": { "description": "If <code>true</code>, the dialog is full-screen." },
     "fullWidth": {
       "description": "If <code>true</code>, the dialog stretches to <code>maxWidth</code>.<br>Notice that the dialog width grow is limited by the default margin."

docs/translations/api-docs/modal/modal.json

@@ -28,9 +28,6 @@
     "disableEnforceFocus": {
       "description": "If <code>true</code>, the modal will not prevent focus from leaving the modal while open.<br>Generally this should never be set to <code>true</code> as it makes the modal less accessible to assistive technologies, like screen readers."
     },
-    "disableEscapeKeyDown": {
-      "description": "If <code>true</code>, hitting escape will not fire the <code>onClose</code> callback."
-    },
     "disablePortal": {
       "description": "The <code>children</code> will be under the DOM hierarchy of the parent component."
     },

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

@@ -110,11 +110,6 @@ export interface DialogProps
    * Override or extend the styles applied to the component.
    */
   classes?: Partial<DialogClasses> | undefined;
-  /**
-   * If `true`, hitting escape will not fire the `onClose` callback.
-   * @default false
-   */
-  disableEscapeKeyDown?: boolean | undefined;
   /**
    * If `true`, the dialog is full-screen.
    * @default false

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

@@ -222,7 +222,6 @@ const Dialog = React.forwardRef(function Dialog(inProps, ref) {
     BackdropProps,
     children,
     className,
-    disableEscapeKeyDown = false,
     fullScreen = false,
     fullWidth = false,
     maxWidth = 'sm',
@@ -242,7 +241,6 @@ const Dialog = React.forwardRef(function Dialog(inProps, ref) {
 
   const ownerState = {
     ...props,
-    disableEscapeKeyDown,
     fullScreen,
     fullWidth,
     maxWidth,
@@ -351,7 +349,6 @@ const Dialog = React.forwardRef(function Dialog(inProps, ref) {
           ...backdropSlotProps,
         },
       }}
-      disableEscapeKeyDown={disableEscapeKeyDown}
       onClose={onClose}
       open={open}
       onClick={handleBackdropClick}
@@ -426,11 +423,6 @@ Dialog.propTypes /* remove-proptypes */ = {
    * @ignore
    */
   className: PropTypes.string,
-  /**
-   * If `true`, hitting escape will not fire the `onClose` callback.
-   * @default false
-   */
-  disableEscapeKeyDown: PropTypes.bool,
   /**
    * If `true`, the dialog is full-screen.
    * @default false

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

@@ -171,7 +171,7 @@ describe('<Dialog />', () => {
     function DialogWithBackdropClickDisabled(props) {
       const { onClose, ...other } = props;
       function handleClose(event, reason) {
-        if (reason !== 'backdropClick') {
+        if (!['backdropClick', 'escapeKeyDown'].includes(reason)) {
           onClose(event, reason);
         }
       }
@@ -180,12 +180,7 @@ describe('<Dialog />', () => {
     }
     const onClose = spy();
     render(
-      <DialogWithBackdropClickDisabled
-        open
-        disableEscapeKeyDown
-        onClose={onClose}
-        transitionDuration={0}
-      >
+      <DialogWithBackdropClickDisabled open onClose={onClose} transitionDuration={0}>
         foo
       </DialogWithBackdropClickDisabled>,
     );

packages/mui-material/src/Modal/Modal.d.ts

@@ -121,11 +121,6 @@ export interface ModalOwnProps {
    * @default false
    */
   disableEnforceFocus?: boolean | undefined;
-  /**
-   * If `true`, hitting escape will not fire the `onClose` callback.
-   * @default false
-   */
-  disableEscapeKeyDown?: boolean | undefined;
   /**
    * The `children` will be under the DOM hierarchy of the parent component.
    * @default false

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

@@ -88,7 +88,6 @@ const Modal = React.forwardRef(function Modal(inProps, ref) {
     componentsProps = {},
     disableAutoFocus = false,
     disableEnforceFocus = false,
-    disableEscapeKeyDown = false,
     disablePortal = false,
     disableRestoreFocus = false,
     disableScrollLock = false,
@@ -110,7 +109,6 @@ const Modal = React.forwardRef(function Modal(inProps, ref) {
     closeAfterTransition,
     disableAutoFocus,
     disableEnforceFocus,
-    disableEscapeKeyDown,
     disablePortal,
     disableRestoreFocus,
     disableScrollLock,
@@ -320,11 +318,6 @@ Modal.propTypes /* remove-proptypes */ = {
    * @default false
    */
   disableEnforceFocus: PropTypes.bool,
-  /**
-   * If `true`, hitting escape will not fire the `onClose` callback.
-   * @default false
-   */
-  disableEscapeKeyDown: PropTypes.bool,
   /**
    * The `children` will be under the DOM hierarchy of the parent component.
    * @default false

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

@@ -212,11 +212,7 @@ describe('<Modal />', () => {
           }
         }
 
-        return (
-          <Modal onClose={handleClose} {...other}>
-            <div />
-          </Modal>
-        );
+        return <Modal onClose={handleClose} {...other} />;
       }
       const onClose = spy();
 
@@ -296,28 +292,31 @@ describe('<Modal />', () => {
       expect(handleKeyDown).to.have.property('callCount', 0);
     });
 
-    it('should not call onClose when `disableEscapeKeyDown={true}`', () => {
-      const handleKeyDown = spy();
-      const onCloseSpy = spy();
+    it('should let the user disable escape key down triggering onClose', () => {
+      function ModalWithDisabledEscapeKeyDown(props) {
+        const { onClose, ...other } = props;
+        function handleClose(event, reason) {
+          if (reason !== 'escapeKeyDown') {
+            onClose(event, reason);
+          }
+        }
+
+        return <Modal onClose={handleClose} {...other} />;
+      }
+      const onClose = spy();
 
       render(
-        <div onKeyDown={handleKeyDown}>
-          <Modal open disableEscapeKeyDown onClose={onCloseSpy}>
-            <div data-testid="modal" tabIndex={-1} />
-          </Modal>
-        </div>,
+        <ModalWithDisabledEscapeKeyDown onClose={onClose} open>
+          <div data-testid="modal" />
+        </ModalWithDisabledEscapeKeyDown>,
       );
 
-      act(() => {
-        screen.getByTestId('modal').focus();
-      });
-
+      fireEvent.focus(screen.getByTestId('modal'));
       fireEvent.keyDown(screen.getByTestId('modal'), {
         key: 'Escape',
       });
 
-      expect(onCloseSpy).to.have.property('callCount', 0);
-      expect(handleKeyDown).to.have.property('callCount', 1);
+      expect(onClose).to.have.property('callCount', 0);
     });
 
     it('calls onKeyDown on the Modal', () => {

packages/mui-material/src/Modal/useModal.ts

@@ -31,7 +31,6 @@ const manager = new ModalManager();
 function useModal(parameters: UseModalParameters): UseModalReturnValue {
   const {
     container,
-    disableEscapeKeyDown = false,
     disableScrollLock = false,
     closeAfterTransition = false,
     onTransitionEnter,
@@ -133,13 +132,11 @@ function useModal(parameters: UseModalParameters): UseModalReturnValue {
       return;
     }
 
-    if (!disableEscapeKeyDown) {
-      // Swallow the event, in case someone is listening for the escape key on the body.
-      event.stopPropagation();
+    // Swallow the event, in case someone is listening for the escape key on the body.
+    event.stopPropagation();
 
-      if (onClose) {
-        onClose(event, 'escapeKeyDown');
-      }
+    if (onClose) {
+      onClose(event, 'escapeKeyDown');
     }
   };
 

packages/mui-material/src/Modal/useModal.types.ts

@@ -46,11 +46,6 @@ export type UseModalParameters = {
    * so it's simply `document.body` most of the time.
    */
   container?: PortalProps['container'] | undefined;
-  /**
-   * If `true`, hitting escape will not fire the `onClose` callback.
-   * @default false
-   */
-  disableEscapeKeyDown?: boolean | undefined;
   /**
    * Disable the scroll lock behavior.
    * @default false