Material ui onClose as replacement for disableBackdropClick

Question

Currently I have a dialog

  <Dialog
    open={open}
    data-testid="myTestDialog"
    disableEscapeKeyDown={true}
    disableBackdropClick={true}
  >

From the docs https://material-ui.com/api/dialog/ disableBackdropClick is depreciated and onClose should be used instead but how can I modify the above code to make it work using the new onClose, I am not familiar with this function/signature

Answer 1

To use onClose, your variable open needs to be settable. When open is true the dialog is shown and when onClose is called it sets open to false but only when it is not closing because of a background click or escape press.

E.g.

<Dialog
    open={open}
    data-testid="myTestDialog"
    onClose={(event, reason) => {
        if(reason !== 'backdropClick' && reason !== 'escapeKeyDown') {
            // Set 'open' to false, however you would do that with your particular code.
            setOpen(false);
        }
    }
>