“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.

    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.


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({
}) {
  const handleClose = (event, reason) => {
    if (disableBackdropClick && reason === "backdropClick") {
      return false;

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

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

  return (
    <Dialog onClose={handleClose} {...rest}>

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

  return (
          onClose={() => {
            // Whatever you want to run here on close.
          <p>Dialog content goes here...</p>

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

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

Related Posts