“disableBackdropClick of ForwardRef(Dialog) is deprecated” – Solution and Example

Last Updated:
aMaterial UI React Updated Causes Error disableBackDropClick

After recently updating my Material UI Core package (@material-ui/core) in a React project from 4.11.4 to 4.12.2 I began getting the following warning from my <Dialog/> components:

Failed prop type: The prop `disableBackdropClick` of `ForwardRef(Dialog)` is deprecated. Use the onClose prop with the `reason` argument to filter the `backdropClick` events.

The prop disableBackdropClick has been made redundant, and now requires the user to handle this logic using onClose. The onClose function is passed two arguments: event and reason.

<Dialog
    onClose={(event, reason) => {
        if (reason !== 'backdropClick') {
            onClose(event, reason)
        }
    }}
/>

This is fine if you have a small project with simple functionality. Unfortunately the project I was working on had many Dialog components used across the code base. Each handling disableBackdropClick in their own way.

Solution

My solution (to save time) was to create a wrapper for the Dialog. This allows the project to use the latest MUI package without an excessive amount of refactoring.

import React, {useState} from "react";
import Container from "@material-ui/core/Container";
import Dialog from "@material-ui/core/Dialog";

function DialogMigrate({
  children,
  disableBackdropClick,
  disableEscapeKeyDown,
  onClose,
  ...rest
}) {
  const handleClose = (event, reason) => {
    if (disableBackdropClick && reason === "backdropClick") {
      return false;
    }

    if (disableEscapeKeyDown && reason === "escapeKeyDown") {
      return false;
    }

    if (typeof onClose === "function") {
      onClose();
    }
  };

  return (
    <Dialog onClose={handleClose} {...rest}>
      {children}
    </Dialog>
  );
}

export default function App() {
  
  const [open, setOpen] = useState(true)

  return (
    <Container>
        <DialogMigrate
          open={open}
          disableEscapeKeyDown
          onClose={() => {
            // Whatever you want to run here on close.
            setOpen(false)
          }}
        >
          <p>Dialog content goes here...</p>
        </DialogMigrate>
    </Container>
  );
}

The <DialogMigrate/> component could be refactored to be more succinct. I have left it like this to show exactly what is happening.

[support-block]

To have a play with this and see it live, take a look at the Codesandbox here.

For more React hints and tips take a look at the React Category for this site!

Related Posts

Helpful Bits Straight Into Your Inbox

Subscribe to the newsletter for insights and helpful pieces on React, Gatsby, Next JS, Headless WordPress, and Jest testing.