chore: Replace removeEventListener with abort controller (#3206)

src/app-layout/visual-refresh-toolbar/toolbar/trigger-button/index.tsx

@@ -174,12 +174,12 @@ function TriggerButton(
 
       const wrapperDiv = containerRef.current;
       if (wrapperDiv) {
-        wrapperDiv.addEventListener('pointerdown', handlePointerDownEvent);
-        wrapperDiv.addEventListener('keydown', handleKeyDownEvent);
+        const controller = new AbortController();
+        wrapperDiv.addEventListener('pointerdown', handlePointerDownEvent, { signal: controller.signal });
+        wrapperDiv.addEventListener('keydown', handleKeyDownEvent, { signal: controller.signal });
 
         return () => {
-          wrapperDiv.removeEventListener('pointerdown', handlePointerDownEvent);
-          wrapperDiv.removeEventListener('keydown', handleKeyDownEvent);
+          controller.abort();
         };
       }
     }

src/button-group/item-element.tsx

@@ -65,12 +65,12 @@ const ItemElement = forwardRef(
         }
       };
 
-      window.addEventListener('pointerdown', handlePointerDownEvent);
-      window.addEventListener('keydown', handleKeyDownEvent);
+      const controller = new AbortController();
+      window.addEventListener('pointerdown', handlePointerDownEvent, { signal: controller.signal });
+      window.addEventListener('keydown', handleKeyDownEvent, { signal: controller.signal });
 
       return () => {
-        window.removeEventListener('pointerdown', handlePointerDownEvent);
-        window.removeEventListener('keydown', handleKeyDownEvent);
+        controller.abort();
       };
     }, [item.id, tooltip, setTooltip]);
 

src/code-editor/resizable-box/index.tsx

@@ -40,12 +40,12 @@ export function ResizableBox({ children, height, minHeight, onResize }: ResizeBo
     const onMouseUp = () => {
       setDragOffset(null);
     };
+    const controller = new AbortController();
     document.body.classList.add(styles['resize-active']);
-    document.addEventListener('mousemove', onMouseMove);
-    document.addEventListener('mouseup', onMouseUp);
+    document.addEventListener('mousemove', onMouseMove, { signal: controller.signal });
+    document.addEventListener('mouseup', onMouseUp, { signal: controller.signal });
     return () => {
-      document.removeEventListener('mousemove', onMouseMove);
-      document.removeEventListener('mouseup', onMouseUp);
+      controller.abort();
       document.body.classList.remove(styles['resize-active']);
     };
   }, [dragOffset, minHeight, onResizeStable]);

src/container/use-sticky-header.ts

@@ -109,11 +109,11 @@ export const useStickyHeader = (
   );
   useEffect(() => {
     if (isSticky) {
-      window.addEventListener('scroll', checkIfStuck, true);
-      window.addEventListener('resize', checkIfStuck);
+      const controller = new AbortController();
+      window.addEventListener('scroll', checkIfStuck, { capture: true, signal: controller.signal });
+      window.addEventListener('resize', checkIfStuck, { signal: controller.signal });
       return () => {
-        window.removeEventListener('scroll', checkIfStuck, true);
-        window.removeEventListener('resize', checkIfStuck);
+        controller.abort();
       };
     }
   }, [isSticky, checkIfStuck]);

src/file-dropzone/use-files-dragging.ts

@@ -47,15 +47,14 @@ export function useFilesDragging() {
       dragTimer = setTimeout(() => setFilesDragging(false), 25);
     };
 
-    document.addEventListener('dragover', onDocumentDragOver, false);
-    document.addEventListener('dragleave', onDocumentDragLeave, false);
-    document.addEventListener('drop', onDocumentDrop, false);
+    const controller = new AbortController();
+    document.addEventListener('dragover', onDocumentDragOver, { signal: controller.signal });
+    document.addEventListener('dragleave', onDocumentDragLeave, { signal: controller.signal });
+    document.addEventListener('drop', onDocumentDrop, { signal: controller.signal });
 
     return () => {
       dragTimer && clearTimeout(dragTimer);
-      document.removeEventListener('dragover', onDocumentDragOver);
-      document.removeEventListener('dragleave', onDocumentDragLeave);
-      document.removeEventListener('drop', onDocumentDrop);
+      controller.abort();
     };
   }, []);
 

src/internal/analytics/components/analytics-funnel.tsx

@@ -611,11 +611,11 @@ export const AnalyticsFunnelSubStep = ({
         focusCleanupFunction.current?.();
       }
     };
-    window.addEventListener('mousedown', onMouseDown);
-    window.addEventListener('mouseup', onMouseUp);
+    const controller = new AbortController();
+    window.addEventListener('mousedown', onMouseDown, { signal: controller.signal });
+    window.addEventListener('mouseup', onMouseUp, { signal: controller.signal });
     return () => {
-      window.removeEventListener('mousedown', onMouseDown);
-      window.removeEventListener('mouseup', onMouseUp);
+      controller.abort();
     };
   }, [
     funnelInteractionId,

src/internal/animate.ts

@@ -93,7 +93,7 @@ export function animate({
           if (event.target === element) {
             // Clean up remaining inline styles
             element.style.transitionProperty = '';
-            element.removeEventListener('transitionstart', onTransitionEnd);
+            element.removeEventListener('transitionend', onTransitionEnd);
             if (onTransitionsEnd) {
               ongoingAnimations.delete(id);
               if (ongoingAnimations.size === 0) {

src/internal/components/chart-plot/focus-outline.tsx

@@ -29,11 +29,11 @@ function useFocusVisibleState() {
       }
     }
 
-    document.addEventListener('mousedown', handleMousedown);
-    document.addEventListener('keydown', handleKeydown);
+    const controller = new AbortController();
+    document.addEventListener('mousedown', handleMousedown, { signal: controller.signal });
+    document.addEventListener('keydown', handleKeydown, { signal: controller.signal });
     return () => {
-      document.removeEventListener('mousedown', handleMousedown);
-      document.removeEventListener('keydown', handleKeydown);
+      controller.abort();
     };
   });
 

src/internal/components/dropdown/index.tsx

@@ -410,11 +410,11 @@ const Dropdown = ({
 
     updateDropdownPosition();
 
-    window.addEventListener('scroll', updateDropdownPosition, true);
-    window.addEventListener('resize', updateDropdownPosition, true);
+    const controller = new AbortController();
+    window.addEventListener('scroll', updateDropdownPosition, { capture: true, signal: controller.signal });
+    window.addEventListener('resize', updateDropdownPosition, { capture: true, signal: controller.signal });
     return () => {
-      window.removeEventListener('scroll', updateDropdownPosition, true);
-      window.removeEventListener('resize', updateDropdownPosition, true);
+      controller.abort();
     };
   }, [open, expandToViewport]);
 

src/internal/components/transition/index.tsx

@@ -50,15 +50,15 @@ export function Transition({
     if (node === null) {
       return;
     }
+    const controller = new AbortController();
     const listener = (e: TransitionEvent | AnimationEvent) => {
       if (e.target === node) {
-        node.removeEventListener('transitionend', listener);
-        node.removeEventListener('animationend', listener);
+        controller.abort();
         done();
       }
     };
-    node.addEventListener('transitionend', listener);
-    node.addEventListener('animationend', listener);
+    node.addEventListener('transitionend', listener, { signal: controller.signal });
+    node.addEventListener('animationend', listener, { signal: controller.signal });
   }, []);
 
   return (

src/internal/focus-tracker.ts

@@ -10,6 +10,7 @@ interface FocusTrackerOptions {
 export default class FocusTracker {
   private readonly onFocusLeave: () => void;
   private readonly onFocusEnter: () => void;
+  private readonly controller: AbortController;
 
   private currentlyFocused = false;
 
@@ -19,17 +20,17 @@ export default class FocusTracker {
   ) {
     this.onFocusEnter = onFocusEnter;
     this.onFocusLeave = onFocusLeave;
+    this.controller = new AbortController();
   }
 
   initialize() {
     this.currentlyFocused = nodeBelongs(this.node, document.activeElement);
-    document.addEventListener('focusin', this.focusInListener);
-    document.addEventListener('focusout', this.focusOutListener);
+    document.addEventListener('focusin', this.focusInListener, { signal: this.controller.signal });
+    document.addEventListener('focusout', this.focusOutListener, { signal: this.controller.signal });
   }
 
   destroy() {
-    document.removeEventListener('focusin', this.focusInListener);
-    document.removeEventListener('focusout', this.focusOutListener);
+    this.controller.abort();
   }
 
   private focusInListener = (event: FocusEvent) => {

src/internal/hooks/use-mouse-down-target.ts

@@ -12,11 +12,11 @@ const useEventListenersSingleton = createSingletonHandler<Node | null>(setTarget
   function handleKeyDown() {
     setTarget(null);
   }
-  window.addEventListener('mousedown', handleMouseDown);
-  window.addEventListener('keydown', handleKeyDown);
+  const controller = new AbortController();
+  window.addEventListener('mousedown', handleMouseDown, { signal: controller.signal });
+  window.addEventListener('keydown', handleKeyDown, { signal: controller.signal });
   return () => {
-    window.removeEventListener('mousedown', handleMouseDown);
-    window.removeEventListener('keydown', handleKeyDown);
+    controller.abort();
   };
 });
 

src/popover/container.tsx

@@ -119,15 +119,14 @@ export default function PopoverContainer({
 
     const updatePositionOnResize = () => requestAnimationFrame(() => updatePositionHandler());
     const refreshPosition = () => requestAnimationFrame(() => positionHandlerRef.current());
+    const controller = new AbortController();
 
-    window.addEventListener('click', onClick);
-    window.addEventListener('resize', updatePositionOnResize);
-    window.addEventListener('scroll', refreshPosition, true);
+    window.addEventListener('click', onClick, { signal: controller.signal });
+    window.addEventListener('resize', updatePositionOnResize, { signal: controller.signal });
+    window.addEventListener('scroll', refreshPosition, { capture: true, signal: controller.signal });
 
     return () => {
-      window.removeEventListener('click', onClick);
-      window.removeEventListener('resize', updatePositionOnResize);
-      window.removeEventListener('scroll', refreshPosition, true);
+      controller.abort();
     };
   }, [hideOnOverscroll, keepPosition, positionHandlerRef, trackRef, updatePositionHandler]);
 

src/table/__tests__/resizable-columns.test.tsx

@@ -130,20 +130,19 @@ test('should show the tracking line and activate resizer onMouseDown', () => {
 test('should attach event listeners to the body on mousedown and remove on mouseup ', () => {
   const { wrapper } = renderTable(<Table {...defaultProps} />);
   jest.spyOn(document, 'addEventListener');
-  jest.spyOn(document, 'removeEventListener');
+  jest.spyOn(AbortController.prototype, 'abort');
   expect(document.addEventListener).toHaveBeenCalledTimes(0);
 
   fireMousedown(wrapper.findColumnResizer(1)!);
   expect(document.addEventListener).toHaveBeenCalledTimes(2);
-  expect(document.addEventListener).toHaveBeenCalledWith('mousemove', expect.any(Function));
-  expect(document.addEventListener).toHaveBeenCalledWith('mouseup', expect.any(Function));
-  expect(document.removeEventListener).toHaveBeenCalledTimes(0);
+  expect(document.addEventListener).toHaveBeenCalledWith('mousemove', expect.any(Function), expect.any(Object));
+  expect(document.addEventListener).toHaveBeenCalledWith('mouseup', expect.any(Function), expect.any(Object));
+  expect(AbortController.prototype.abort).toHaveBeenCalledTimes(0);
 
   (document.addEventListener as jest.Mock).mockReset();
   fireMouseup(200);
   expect(document.addEventListener).toHaveBeenCalledTimes(0);
-  expect(document.removeEventListener).toHaveBeenCalledWith('mousemove', expect.any(Function));
-  expect(document.removeEventListener).toHaveBeenCalledWith('mouseup', expect.any(Function));
+  expect(AbortController.prototype.abort).toHaveBeenCalledTimes(1);
 });
 
 test('should correctly handle a column with special character', () => {

src/table/resizer/index.tsx

@@ -163,15 +163,16 @@ export function Resizer({
     };
 
     updateTrackerPosition(getLogicalBoundingClientRect(elements.header).insetInlineEnd);
+    const controller = new AbortController();
 
     if (isDragging) {
       document.body.classList.add(styles['resize-active']);
-      document.addEventListener('mousemove', onMouseMove);
-      document.addEventListener('mouseup', onMouseUp);
+      document.addEventListener('mousemove', onMouseMove, { signal: controller.signal });
+      document.addEventListener('mouseup', onMouseUp, { signal: controller.signal });
     }
     if (resizerHasFocus) {
       document.body.classList.add(styles['resize-active-with-focus']);
-      elements.header.addEventListener('keydown', onKeyDown);
+      elements.header.addEventListener('keydown', onKeyDown, { signal: controller.signal });
     }
     if (isKeyboardDragging) {
       document.body.classList.add(styles['resize-active']);
@@ -181,9 +182,7 @@ export function Resizer({
       clearTimeout(autoGrowTimeout.current);
       document.body.classList.remove(styles['resize-active']);
       document.body.classList.remove(styles['resize-active-with-focus']);
-      document.removeEventListener('mousemove', onMouseMove);
-      document.removeEventListener('mouseup', onMouseUp);
-      elements.header.removeEventListener('keydown', onKeyDown);
+      controller.abort();
     };
   }, [minWidth, isDragging, isKeyboardDragging, resizerHasFocus, onWidthUpdate, onWidthUpdateCommit]);
 

src/table/table-role/grid-navigation.tsx

@@ -93,15 +93,14 @@ class GridNavigationProcessor {
 
   public init(table: HTMLTableElement) {
     this._table = table;
+    const controller = new AbortController();
 
-    this.table.addEventListener('focusin', this.onFocusin);
-    this.table.addEventListener('focusout', this.onFocusout);
-    this.table.addEventListener('keydown', this.onKeydown);
+    this.table.addEventListener('focusin', this.onFocusin, { signal: controller.signal });
+    this.table.addEventListener('focusout', this.onFocusout, { signal: controller.signal });
+    this.table.addEventListener('keydown', this.onKeydown, { signal: controller.signal });
 
     this.cleanup = () => {
-      this.table.removeEventListener('focusin', this.onFocusin);
-      this.table.removeEventListener('focusout', this.onFocusout);
-      this.table.removeEventListener('keydown', this.onKeydown);
+      controller.abort();
     };
   }