From fcb1341b06bcc92af0b368da5ef566c01718316e Mon Sep 17 00:00:00 2001
From: martimalek <46452321+martimalek@users.noreply.github.com>
Date: Wed, 17 Nov 2021 16:52:17 +0100
Subject: [PATCH] fix: cleanup Modal timeout (#193)

---
 src/components/Modal/Modal.tsx | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/components/Modal/Modal.tsx b/src/components/Modal/Modal.tsx
index 9f4200bd7..35d60b587 100644
--- a/src/components/Modal/Modal.tsx
+++ b/src/components/Modal/Modal.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState, ReactNode, useContext } from 'react';
+import React, { useEffect, useState, ReactNode, useContext, useRef } from 'react';
 import { createGlobalStyle } from 'styled-components';
 import { WidthProps } from 'styled-system';
 import { useIsEscKeyPressed } from '../../utils/hooks/useIsEscKeyPressed';
@@ -56,12 +56,13 @@ const ANIMATION_DURATION = Math.max(DIMMING_ANIMATION_DURATION, CARD_ANIMATION_D
 const Modal: React.FC<ModalProps> = ({ children, onClose, dismissible, ...rest }: ModalProps) => {
     const [visible, setVisible] = useState(true);
     const isEscKeyPressed = useIsEscKeyPressed();
+    const closeTimeout = useRef(null);
 
     const handleClose: DismissFunc = () => {
         setVisible(false);
 
         if (onClose) {
-            setTimeout(() => onClose(), ANIMATION_DURATION);
+            closeTimeout.current = setTimeout(() => onClose(), ANIMATION_DURATION);
         }
     };
 
@@ -77,6 +78,13 @@ const Modal: React.FC<ModalProps> = ({ children, onClose, dismissible, ...rest }
         }
     }, [dismissible, isEscKeyPressed]);
 
+    useEffect(
+        () => () => {
+            if (closeTimeout.current) clearTimeout(closeTimeout.current);
+        },
+        []
+    );
+
     const renderChildren = () => {
         if (typeof children === 'function') {
             return children(handleClose);