From 791c3e912673da6401690cc0531c2050d366414c Mon Sep 17 00:00:00 2001
From: Amrit Kashyap Borah <amrit.borah@devtron.ai>
Date: Tue, 26 Nov 2024 16:23:20 +0530
Subject: [PATCH] fix: remove keydown listener on tippy customized unmount

---
 src/Common/TippyCustomized.tsx | 21 +++++++++++++++------
 1 file changed, 15 insertions(+), 6 deletions(-)

diff --git a/src/Common/TippyCustomized.tsx b/src/Common/TippyCustomized.tsx
index 3b31b86e6..b292fefd3 100644
--- a/src/Common/TippyCustomized.tsx
+++ b/src/Common/TippyCustomized.tsx
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import React, { useRef, useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import Tippy from '@tippyjs/react'
 import { ReactComponent as CloseIcon } from '../Assets/Icon/ic-cross.svg'
 import { ReactComponent as Help } from '../Assets/Icon/ic-help.svg'
@@ -33,7 +33,6 @@ export const TippyCustomized = (props: TippyCustomizedProps) => {
 
     const onTippyMount = (tippyInstance) => {
         tippyRef.current = tippyInstance
-        document.addEventListener('keydown', closeOnEsc)
     }
 
     const closeTippy = (e) => {
@@ -49,11 +48,21 @@ export const TippyCustomized = (props: TippyCustomizedProps) => {
         setShowHeadingInfo(false)
     }
 
-    const closeOnEsc = (e) => {
-        if (e.keyCode === 27) {
-            closeTippy(e)
+    useEffect(() => {
+        const closeOnEsc = (e) => {
+            if (e.keyCode === 27) {
+                closeTippy(e)
+            }
         }
-    }
+        
+        document.addEventListener('keydown', closeOnEsc)
+
+        return () => {
+            document.removeEventListener('keydown', closeOnEsc)
+        }
+    }, [])
+
+
 
     const toggleHeadingInfo = (e) => {
         setShowHeadingInfo(not)