From 48ed3b7dc6b7d9d36989b2595414f86f5f4121a8 Mon Sep 17 00:00:00 2001
From: Hristo Terezov <hristo@jitsi.org>
Date: Thu, 17 Nov 2022 16:17:43 -0600
Subject: [PATCH] fix(dialog): cancel hide timeout on openDialog

Since we unmount the dialog after a timeout because of an animation we
need to cancel the timeout in case we need to render new dialog.
Otherwise the actual hiding can be executed after we render the new
dialog.
---
 .../ui/components/web/DialogTransition.tsx    | 19 +++++++++++++++----
 1 file changed, 15 insertions(+), 4 deletions(-)

diff --git a/react/features/base/ui/components/web/DialogTransition.tsx b/react/features/base/ui/components/web/DialogTransition.tsx
index 408a0d3a75..4727758993 100644
--- a/react/features/base/ui/components/web/DialogTransition.tsx
+++ b/react/features/base/ui/components/web/DialogTransition.tsx
@@ -2,18 +2,29 @@ import React, { ReactElement, useEffect, useState } from 'react';
 
 export const DialogTransitionContext = React.createContext({ isUnmounting: false });
 
+type TimeoutType = ReturnType<typeof setTimeout>;
+
 const DialogTransition = ({ children }: { children: ReactElement | null; }) => {
     const [ childrenToRender, setChildrenToRender ] = useState(children);
     const [ isUnmounting, setIsUnmounting ] = useState(false);
+    const [ timeoutID, setTimeoutID ] = useState<TimeoutType | undefined>(undefined);
 
     useEffect(() => {
         if (children === null) {
             setIsUnmounting(true);
-            setTimeout(() => {
-                setChildrenToRender(children);
-                setIsUnmounting(false);
-            }, 150);
+            if (typeof timeoutID === 'undefined') {
+                setTimeoutID(setTimeout(() => {
+                    setChildrenToRender(children);
+                    setIsUnmounting(false);
+                    setTimeoutID(undefined);
+                }, 150));
+            }
         } else {
+            if (typeof timeoutID !== 'undefined') {
+                clearTimeout(timeoutID);
+                setTimeoutID(undefined);
+                setIsUnmounting(false);
+            }
             setChildrenToRender(children);
         }
     }, [ children ]);