Merge pull request #595 from openameba/fix/appeal-modal

fix(spindle-ui): remove closing className
openameba · Dec 16, 2022 · 3949ad5 · 3949ad5
2 parents b7adcba + 3101474
commit 3949ad5
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 1 deletion.
diff --git a/packages/spindle-ui/src/Dialog/Dialog.tsx b/packages/spindle-ui/src/Dialog/Dialog.tsx
@@ -41,6 +41,23 @@ const Frame = forwardRef<DialogHTMLElement, DialogProps>(function Dialog(
     typeof onClose === 'function' && onClose(event);
   };
 
+  const handleDialogClick = (event: React.MouseEvent<DialogHTMLElement>) => {
+    // Detect backdrop click
+    if (event.target === dialogEl.current) {
+      onClose && onClose(event);
+    }
+  };
+
+  const handleDialogClose = (
+    event: React.SyntheticEvent<DialogHTMLElement>,
+  ) => {
+    // Detect escape key type
+    if (event.target === dialogEl.current) {
+      onClose && onClose(event);
+      setClosing(false);
+    }
+  };
+
   const handleAnimationEnd = useCallback(
     (event: AnimationEvent) => {
       if (
@@ -91,6 +108,8 @@ const Frame = forwardRef<DialogHTMLElement, DialogProps>(function Dialog(
         .filter(Boolean)
         .join(' ')
         .trim()}
+      onClick={handleDialogClick}
+      onClose={handleDialogClose}
       {...rest}
     >
       <form method="dialog" onSubmit={handleFormSubmit}>

diff --git a/packages/spindle-ui/src/Modal/AppealModal.tsx b/packages/spindle-ui/src/Modal/AppealModal.tsx
@@ -49,6 +49,16 @@ const Frame = forwardRef<DialogHTMLElement, AppealModalProps>(
       }
     };
 
+    const handleDialogClose = (
+      event: React.SyntheticEvent<DialogHTMLElement>,
+    ) => {
+      // Detect escape key type
+      if (event.target === dialogEl.current) {
+        onClose && onClose(event);
+        setClosing(false);
+      }
+    };
+
     const handleAnimationEnd = useCallback(
       (event: AnimationEvent) => {
         if (
@@ -57,7 +67,6 @@ const Frame = forwardRef<DialogHTMLElement, AppealModalProps>(
           !event.pseudoElement // To exclude ::backdrop
         ) {
           dialogEl.current.close && dialogEl.current.close();
-          setClosing(false);
         }
       },
       [dialogEl],
@@ -107,6 +116,7 @@ const Frame = forwardRef<DialogHTMLElement, AppealModalProps>(
           .trim()}
         ref={mergeRefs([dialogEl, ref])}
         onClick={handleDialogClick}
+        onClose={handleDialogClose}
         {...rest}
       >
         <form