Fix missing event listener removals

src/hooks/useResize.ts

@@ -20,23 +20,23 @@ export const useResize = (
     elementRef.current.style.width = `${initialWidth}px`;
   }, [elementRef, initialWidth]);
 
-  const handleMouseUp = () => {
+  function handleMouseUp() {
     document.body.classList.remove('no-selection', 'cursor-ew-resize');
-  };
+  }
 
-  const initResize = (event: React.MouseEvent<HTMLElement, MouseEvent>) => {
+  function initResize(event: React.MouseEvent<HTMLElement, MouseEvent>) {
     document.body.classList.add('no-selection', 'cursor-ew-resize');
 
     setInitialMouseX(event.clientX);
     setInitialElementWidth(elementRef.current!.offsetWidth);
     markIsActive();
-  };
+  }
 
-  const resetResize = (event: React.MouseEvent<HTMLElement, MouseEvent>) => {
+  function resetResize(event: React.MouseEvent<HTMLElement, MouseEvent>) {
     event.preventDefault();
     elementRef.current!.style.width = '';
     onReset();
-  };
+  }
 
   useEffect(() => {
     if (!isActive) return;
@@ -46,18 +46,24 @@ export const useResize = (
       elementRef.current!.style.width = `${newWidth}px`;
     };
 
-    const stopDrag = () => {
+    function stopDrag() {
+      cleanup();
+      onResize(elementRef.current!.offsetWidth);
+    }
+
+    function cleanup() {
       handleMouseUp();
       document.removeEventListener('mousemove', handleMouseMove, false);
       document.removeEventListener('mouseup', stopDrag, false);
       document.removeEventListener('blur', stopDrag, false);
-      onResize(elementRef.current!.offsetWidth);
       unmarkIsActive();
-    };
+    }
 
     document.addEventListener('mousemove', handleMouseMove, false);
     document.addEventListener('mouseup', stopDrag, false);
     document.addEventListener('blur', stopDrag, false);
+
+    return cleanup;
   }, [initialElementWidth, initialMouseX, elementRef, onResize, isActive, unmarkIsActive]);
 
   return { initResize, resetResize, handleMouseUp };

src/hooks/useSelectWithEnter.ts

@@ -18,7 +18,7 @@ const useSendWithEnter = (
   useEffect(() => {
     window.addEventListener('keydown', handleKeyDown, false);
 
-    return () => window.removeEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown, false);
   }, [handleKeyDown]);
 
   return buttonRef;

src/util/captureEvents.ts

@@ -130,7 +130,7 @@ export function captureEvents(element: HTMLElement, options: CaptureOptions) {
     }
   }
 
-  function onRelease(e: MouseEvent | TouchEvent) {
+  function onRelease(e?: MouseEvent | TouchEvent) {
     if (captureEvent) {
       if (options.withCursor) {
         document.body.classList.remove('cursor-grabbing');
@@ -149,20 +149,22 @@ export function captureEvents(element: HTMLElement, options: CaptureOptions) {
         });
       }
 
-      if (hasMoved) {
+      if (e) {
-        if (options.onRelease) {
+        if (hasMoved) {
-          options.onRelease(e);
+          if (options.onRelease) {
+            options.onRelease(e);
+          }
+        } else if (e.type === 'mouseup') {
+          if (options.onDoubleClick && Date.now() - lastClickTime < 300) {
+            options.onDoubleClick(e, {
+              centerX: captureEvent!.pageX!,
+              centerY: captureEvent!.pageY!,
+            });
+          } else if (options.onClick && (!('button' in e) || e.button === 0)) {
+            options.onClick(e);
+          }
+          lastClickTime = Date.now();
         }
-      } else if (e.type === 'mouseup') {
-        if (options.onDoubleClick && Date.now() - lastClickTime < 300) {
-          options.onDoubleClick(e, {
-            centerX: captureEvent!.pageX!,
-            centerY: captureEvent!.pageY!,
-          });
-        } else if (options.onClick && (!('button' in e) || e.button === 0)) {
-          options.onClick(e);
-        }
-        lastClickTime = Date.now();
       }
     }
 
@@ -276,8 +278,10 @@ export function captureEvents(element: HTMLElement, options: CaptureOptions) {
   element.addEventListener('touchstart', onCapture, { passive: !options.isNotPassive });
 
   return () => {
-    element.removeEventListener('mousedown', onCapture);
+    onRelease();
+
     element.removeEventListener('touchstart', onCapture);
+    element.removeEventListener('mousedown', onCapture);
   };
 }