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
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);
}
}
>