From 7d2a2c72101d48638ae08f512412455e9a51ec52 Mon Sep 17 00:00:00 2001
From: Arthur Baileys Li <arthurlitovko@gmail.com>
Date: Tue, 28 Jan 2025 21:24:42 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20use=20`AbortController`=20instead?=
 =?UTF-8?q?=20of=20`removeEventListener`?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/hooks/useEmojiPreviewEvents.ts | 31 +++++++++++++++---------------
 src/hooks/useMouseDownHandlers.ts  | 26 +++++++++++--------------
 2 files changed, 26 insertions(+), 31 deletions(-)

diff --git a/src/hooks/useEmojiPreviewEvents.ts b/src/hooks/useEmojiPreviewEvents.ts
index 8e044a2f..4a07903f 100644
--- a/src/hooks/useEmojiPreviewEvents.ts
+++ b/src/hooks/useEmojiPreviewEvents.ts
@@ -29,18 +29,23 @@ export function useEmojiPreviewEvents(
     }
     const bodyRef = BodyRef.current;
 
-    bodyRef?.addEventListener('keydown', onEscape, {
-      passive: true
-    });
+    const controller = new AbortController();
 
-    bodyRef?.addEventListener('mouseover', onMouseOver, true);
+    const passiveOptions = {
+      passive: true,
+      signal: controller.signal
+    };
 
-    bodyRef?.addEventListener('focus', onEnter, true);
+    const captureOptions = {
+      capture: true,
+      signal: controller.signal
+    };
 
-    bodyRef?.addEventListener('mouseout', onLeave, {
-      passive: true
-    });
-    bodyRef?.addEventListener('blur', onLeave, true);
+    bodyRef?.addEventListener('keydown', onEscape, passiveOptions);
+    bodyRef?.addEventListener('mouseover', onMouseOver, captureOptions);
+    bodyRef?.addEventListener('focus', onEnter, captureOptions);
+    bodyRef?.addEventListener('mouseout', onLeave, passiveOptions);
+    bodyRef?.addEventListener('blur', onLeave, passiveOptions);
 
     function onEnter(e: FocusEvent) {
       const button = buttonFromTarget(e.target as HTMLElement);
@@ -95,13 +100,7 @@ export function useEmojiPreviewEvents(
       }
     }
 
-    return () => {
-      bodyRef?.removeEventListener('mouseover', onMouseOver);
-      bodyRef?.removeEventListener('mouseout', onLeave);
-      bodyRef?.removeEventListener('focus', onEnter, true);
-      bodyRef?.removeEventListener('blur', onLeave, true);
-      bodyRef?.removeEventListener('keydown', onEscape);
-    };
+    return () => controller.abort();
   }, [BodyRef, allow, setPreviewEmoji, isMouseDisallowed, allowMouseMove]);
 }
 
diff --git a/src/hooks/useMouseDownHandlers.ts b/src/hooks/useMouseDownHandlers.ts
index 64714cf4..48d093a7 100644
--- a/src/hooks/useMouseDownHandlers.ts
+++ b/src/hooks/useMouseDownHandlers.ts
@@ -136,22 +136,18 @@ export function useMouseDownHandlers(
       return;
     }
     const confainerRef = ContainerRef.current;
-    confainerRef.addEventListener('click', onClick, {
-      passive: true
-    });
-
-    confainerRef.addEventListener('mousedown', onMouseDown, {
-      passive: true
-    });
-    confainerRef.addEventListener('mouseup', onMouseUp, {
-      passive: true
-    });
-
-    return () => {
-      confainerRef?.removeEventListener('click', onClick);
-      confainerRef?.removeEventListener('mousedown', onMouseDown);
-      confainerRef?.removeEventListener('mouseup', onMouseUp);
+
+    const controller = new AbortController();
+    const options = {
+      passive: true,
+      signal: controller.signal
     };
+
+    confainerRef.addEventListener('click', onClick, options);
+    confainerRef.addEventListener('mousedown', onMouseDown, options);
+    confainerRef.addEventListener('mouseup', onMouseUp, options);
+
+    return () => controller.abort();
   }, [ContainerRef, onClick, onMouseDown, onMouseUp]);
 }