disableBackdropClick

[John0x]

Hey, is there a way to disable the closing of an dialog, when clicked outside the dialog?
Unfortunately disableBackdropClick has been removed

[Quernest]

Hey, is there a way to disable the closing of an dialog, when clicked outside the dialog? Unfortunately disableBackdropClick has been removed

Hey, sure! It depends on the configuration of your Dialog so you can handle the closing events however you want. The @mui provides the reason for closing in the onClose callback.

const DialogWithoutBackdropClick: React.FC<DialogProps> = ({ onClose, ...otherProps }) => {
  const handleClose = (
    event: {},
    reason: 'backdropClick' | 'escapeKeyDown'
  ) => {
    // Backdrop click is blocked. Don't forget to make a workaround to close the Dialog :)
    if (reason !== 'backdropClick') {
      onClose?.(event, reason);
    }
  };

  return (
    <Dialog onClose={handleClose} {...otherProps}>
      <DialogTitle>Simple Dialog</DialogTitle>
    </Dialog>
  );
};

// Somewhere else
<Button
  variant="contained"
  onClick={() => showModal(DialogWithoutBackdropClick)}
  color="primary"
>
  Click to open
</Button>

[John0x]

Perfect, thank you :)