From b945c860ebb052cb1fb145c6422bd3fbc0584cfa Mon Sep 17 00:00:00 2001
From: Yulong Ruan <ruanyu1@gmail.com>
Date: Wed, 1 Mar 2023 05:37:02 +0800
Subject: [PATCH] fix: overlay mask onClick been called multiple times (#257)

The cause:
`click` event listener is not properly unsubscribed

Signed-off-by: Yulong Ruan <ruanyl@amazon.com>
Co-authored-by: Anan Zhuang <ananzh@amazon.com>
---
 src/components/overlay_mask/overlay_mask.tsx | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/components/overlay_mask/overlay_mask.tsx b/src/components/overlay_mask/overlay_mask.tsx
index 9e820eea0c..863beb1b08 100644
--- a/src/components/overlay_mask/overlay_mask.tsx
+++ b/src/components/overlay_mask/overlay_mask.tsx
@@ -120,16 +120,18 @@ export const OuiOverlayMask: FunctionComponent<OuiOverlayMaskProps> = ({
 
   useEffect(() => {
     if (!overlayMaskNode.current || !onClick) return;
+
     const portalTarget = overlayMaskNode.current;
-    overlayMaskNode.current.addEventListener('click', (e) => {
+    const handleClick = (e: MouseEvent) => {
       if (e.target === overlayMaskNode.current) {
         onClick();
       }
-    });
+    };
+    portalTarget.addEventListener('click', handleClick);
 
     return () => {
-      if (portalTarget && onClick) {
-        portalTarget.removeEventListener('click', onClick);
+      if (portalTarget) {
+        portalTarget.removeEventListener('click', handleClick);
       }
     };
   }, [onClick]);