Handle Dialog.disableBackdropClick descoped property warning in MUI v5

Recently I started to work on a simple mahjong game. Initially I planned to create a clone of mahjong titans in react, but I realized that even if it is a simple mahjong game and it does not have dialogs and other similar gui elements, is not that easy to implement in react. So, I went for even a more simple mahjong game: mahjong memory, a memory game with a mahjong twist where you need to pair mahjong tiles.

I started the game long time back did not finish yet. Now, I upgraded from Material UI 4 to Material and I encountered the Handle Dialog.disableBackdropClick descoped property warning.

If you are moving from Material UI v4 to MUI V5 you might encounter the same warning. It happens because disableBackdropClick is descoped in MUI v5. disableBackdropClick is used to prevent closing the dialog when the background is clicked. However, if we need that functionality in MUI v5, we need to implement.

Here is the warning that is triggered when the dialog is open:

react-dom.development.js:86 Warning: React does not recognize the disableBackdropClick prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase disablebackdropclick instead. If you accidentally passed it from a parent component, remove it from the DOM element.

This is the dialog:

      <Dialog
        open={showModal}
        disableBackdropClick
        disableEscapeKeyDown
        aria-labelledby="alert-dialog-title"
        aria-describedby="alert-dialog-description"
        onClose={handleDlgClose}
      >
        <DialogTitle id="alert-dialog-title">
          The title of the dialog
        </DialogTitle>
        <DialogContent>
          <DialogContentText id="alert-dialog-description">
            The message is here
            {bestScore} moves.
          </DialogContentText>
        </DialogContent>
        <DialogActions>
          <Button onClick={handleOk} color="primary">
            Restart
          </Button>
        </DialogActions>
      </Dialog>

In order to prevent closing the Dialog in MUI v5, we need to add a function handleDlgClose that intercepts the close event and if it comes from a click in the background and returns without closing the dialog.

  const handleDlgClose = (event, reason) => {
    if (reason && reason == "backdropClick") {
      console.log('backdropClicked. Not closing dialog.')
      return;
    }

    setShowModal(false);
  }

Then we add in the Dialog code the event handler and we remove the disableBackdropClick property:

      <Dialog
        open={showModal}
        disableEscapeKeyDown
        aria-labelledby="alert-dialog-title"
        aria-describedby="alert-dialog-description"
        onClose={handleDlgClose}
      >
      ...