From b7cbd16b469b723ff6fc6bdd4947ccca05c370b1 Mon Sep 17 00:00:00 2001
From: Harold Vilander <harold.vilander@selectquote.com>
Date: Tue, 15 Mar 2022 14:09:23 -0500
Subject: [PATCH] =?UTF-8?q?fix:=20=F0=9F=90=9B=20Removing=20depricated=20M?=
 =?UTF-8?q?UI=20Dialog=20prop=20disable=20Bg=20click?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

✅ Closes: #646
---
 .../SQFormDialog/SQFormDialogInner.js         | 22 +++++++++++++------
 .../SQFormDialogStepper.js                    | 13 ++++++++++-
 2 files changed, 27 insertions(+), 8 deletions(-)

diff --git a/src/components/SQFormDialog/SQFormDialogInner.js b/src/components/SQFormDialog/SQFormDialogInner.js
index 7bb3c29f..49930979 100644
--- 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
index 98852adc..791eb6a1 100644
--- 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}
         >