fix: 🐛 Removing depricated MUI Dialog prop disable Bg click

✅ Closes: #646
SelectQuoteLabs · Mar 15, 2022 · b7cbd16 · b7cbd16
1 parent 0343f66
commit b7cbd16
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 8 deletions.
diff --git a/src/components/SQFormDialog/SQFormDialogInner.js b/src/components/SQFormDialog/SQFormDialogInner.js
@@ -87,9 +87,16 @@ function SQFormDialogInner({
     closeDialog: closeDialogAlert,
   } = useDialog();
 
-  const handleCancel = () => {
+  const handleCancel = (
+    event, // Record<string, unknown>,
+    reason // 'backdropClick' | 'escapeKeyDown' | 'cancelClick'
+  ) => {
+    if (disableBackdropClick && reason === 'backdropClick') {
+      return;
+    }
+
     if (!isDirty) {
-      onClose();
+      onClose(event, reason);
     } else {
       openDialogAlert();
     }
@@ -105,13 +112,13 @@ function SQFormDialogInner({
     return (
       <Grid
         container={true}
-        justify={showSecondaryButton ? 'space-between' : 'flex-end'}
+        justifyContent={showSecondaryButton ? 'space-between' : 'flex-end'}
       >
         {showSecondaryButton && (
           <Grid item={true}>
             <RoundedButton
               title={cancelButtonText}
-              onClick={handleCancel}
+              onClick={(event) => handleCancel(event, 'cancelClick')}
               color="secondary"
               variant="outlined"
             >
@@ -148,11 +155,12 @@ function SQFormDialogInner({
   return (
     <>
       <Dialog
-        disableBackdropClick={disableBackdropClick}
         maxWidth={maxWidth}
         open={isOpen}
         TransitionComponent={Transition}
-        onClose={showSecondaryButton ? handleCancel : undefined}
+        onClose={
+          showSecondaryButton || disableBackdropClick ? handleCancel : undefined
+        }
       >
         <Form>
           <DialogTitle disableTypography={true} classes={titleClasses}>
@@ -177,7 +185,7 @@ function SQFormDialogInner({
               : showSecondaryButton && (
                   <RoundedButton
                     title={cancelButtonText}
-                    onClick={handleCancel}
+                    onClick={(event) => handleCancel(event, 'cancelClick')}
                     color="secondary"
                     variant="outlined"
                   >

diff --git a/src/components/SQFormDialogStepper/SQFormDialogStepper.js b/src/components/SQFormDialogStepper/SQFormDialogStepper.js
@@ -173,6 +173,17 @@ export function SQFormDialogStepper({
     );
   }
 
+  const handleClose = (
+    event, // Record<string, unknown>,
+    reason // 'backdropClick' | 'escapeKeyDown' | 'cancelClick'
+  ) => {
+    if (disableBackdropClick && reason === 'backDropClick') {
+      return;
+    }
+
+    onClose(event, reason);
+  };
+
   return (
     <Formik
       {...props}
@@ -187,7 +198,7 @@ export function SQFormDialogStepper({
           disableBackdropClick={disableBackdropClick}
           maxWidth={maxWidth}
           open={isOpen}
-          onClose={onClose}
+          onClose={handleClose}
           fullWidth={fullWidth}
           {...dialogProps}
         >