Fixed an issue with SupportForm not being submittable (#10619)

replayio · Oct 22, 2024 · fd67d4c · fd67d4c
1 parent 6d30a3e
commit fd67d4c
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 8 deletions.
diff --git a/packages/replay-next/components/errors/ModalFrame.tsx b/packages/replay-next/components/errors/ModalFrame.tsx
@@ -15,7 +15,7 @@ export function ModalFrame({
 }: {
   children: ReactNode;
   dataTestId?: string;
-  onDismiss: () => void;
+  onDismiss?: () => void;
   showCloseButton?: boolean;
   title: ReactNode;
 }) {

diff --git a/packages/replay-next/components/errors/UnexpectedErrorForm.tsx b/packages/replay-next/components/errors/UnexpectedErrorForm.tsx
@@ -61,7 +61,6 @@ function UnexpectedErrorFormSuspends({ details, replayClient, title, unexpectedE
   return (
     <ModalFrame
       dataTestId="UnexpectedErrorDetails"
-      onDismiss={noop}
       showCloseButton={!!supportFormState}
       title={<span data-test-name="ErrorTitle">{title}</span>}
     >
@@ -109,5 +108,3 @@ function UnexpectedErrorFormSuspends({ details, replayClient, title, unexpectedE
     </ModalFrame>
   );
 }
-
-function noop() {}
diff --git a/packages/replay-next/src/hooks/useModalDismissSignal.ts b/packages/replay-next/src/hooks/useModalDismissSignal.ts
@@ -1,14 +1,18 @@
 import { MutableRefObject, RefObject, useEffect } from "react";
 
+// TODO: this doesn't work correctly when multiple stacked modals are open
+// they are unaware of each other and the global listeners added by them compete between each other
+// in a way that the "outer" can perform its action and call `.preventDefault` - preventing the "inner" one from closing
+
 // Closes a modal dialog if the user clicks outside of it or types "Escape"
 export default function useModalDismissSignal(
   modalRef: MutableRefObject<HTMLDivElement> | RefObject<HTMLDivElement>,
-  dismissCallback: () => void,
+  dismissCallback: (() => void) | undefined,
   dismissOnClickOutside: boolean = true
 ) {
   useEffect(() => {
     const element = modalRef.current;
-    if (element === null) {
+    if (element === null || !dismissCallback) {
       return;
     }
 

diff --git a/src/ui/hooks/useModalDismissSignal.ts b/src/ui/hooks/useModalDismissSignal.ts
@@ -1,14 +1,18 @@
 import { MutableRefObject, RefObject, useEffect } from "react";
 
+// TODO: this doesn't work correctly when multiple stacked modals are open
+// they are unaware of each other and the global listeners added by them compete between each other
+// in a way that the "outer" can perform its action and call `.preventDefault` - preventing the "inner" one from closing
+
 // Closes a modal dialog if the user clicks outside of it or types "Escape"
 export default function useModalDismissSignal(
   modalRef: MutableRefObject<HTMLDivElement> | RefObject<HTMLDivElement>,
-  dismissCallback: () => void,
+  dismissCallback: (() => void) | undefined,
   dismissOnClickOutside: boolean = true
 ) {
   useEffect(() => {
     const element = modalRef.current;
-    if (element === null) {
+    if (element === null || !dismissCallback) {
       return;
     }