fix: overlay mask onClick been called multiple times (#257)

The cause: `click` event listener is not properly unsubscribed Signed-off-by: Yulong Ruan <[email protected]> Co-authored-by: Anan Zhuang <[email protected]>
opensearch-project · Feb 28, 2023 · b945c86 · b945c86
1 parent e8fcf75
commit b945c86
Showing 1 changed file with 6 additions and 4 deletions.
diff --git 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]);