From ade8e5a7100aedfc94f363cfb712da61d2215b67 Mon Sep 17 00:00:00 2001
From: Aarni Koskela <akx@iki.fi>
Date: Tue, 9 Jun 2026 12:40:02 +0300
Subject: [PATCH] fix: keep preventDefault working in the legacy mouse/touch
 bridge

Spreading a React SyntheticEvent only copies own properties,
so preventDefault and stopPropagation were dropped.

The synthetic events might not have real pointer IDs,
so guard against `setPointerCapture` throwing.
---
 src/components/SplitPane.tsx | 7 +++++++
 src/hooks/useResizer.ts      | 6 +++++-
 2 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/src/components/SplitPane.tsx b/src/components/SplitPane.tsx
index 6fc8f277..aafc1f83 100644
--- a/src/components/SplitPane.tsx
+++ b/src/components/SplitPane.tsx
@@ -302,11 +302,15 @@ export function SplitPane(props: SplitPaneProps) {
   const createMouseDownHandler = useCallback(
     (index: number) => (e: React.MouseEvent) => {
       // Create a synthetic pointer event from the mouse event
+      // Spreading a SyntheticEvent only copies own properties,
+      // so preventDefault and stopPropagation must be re-bound.
       const pointerEvent = {
         ...e,
         pointerId: 1,
         pointerType: 'mouse',
         nativeEvent: e.nativeEvent,
+        preventDefault: e.preventDefault.bind(e),
+        stopPropagation: e.stopPropagation.bind(e),
       } as unknown as React.PointerEvent;
       handlePointerDown(index)(pointerEvent);
     },
@@ -318,6 +322,7 @@ export function SplitPane(props: SplitPaneProps) {
       const touch = e.touches[0];
       if (!touch) return;
       // Create a synthetic pointer event from the touch event
+      // See createMouseDownHandler for why preventDefault/stopPropagation are re-bound.
       const pointerEvent = {
         ...e,
         clientX: touch.clientX,
@@ -325,6 +330,8 @@ export function SplitPane(props: SplitPaneProps) {
         pointerId: touch.identifier,
         pointerType: 'touch',
         nativeEvent: e.nativeEvent,
+        preventDefault: e.preventDefault.bind(e),
+        stopPropagation: e.stopPropagation.bind(e),
       } as unknown as React.PointerEvent;
       handlePointerDown(index)(pointerEvent);
     },
diff --git a/src/hooks/useResizer.ts b/src/hooks/useResizer.ts
index 348fc613..d6ab3f1a 100644
--- a/src/hooks/useResizer.ts
+++ b/src/hooks/useResizer.ts
@@ -225,7 +225,11 @@ export function useResizer(options: UseResizerOptions): UseResizerResult {
       const element = e.currentTarget as HTMLElement;
 
       // Capture the pointer to receive all pointer events even if pointer leaves element
-      element.setPointerCapture(e.pointerId);
+      try {
+        element.setPointerCapture(e.pointerId);
+      } catch {
+        // Maybe a synthesized event, so ignore.
+      }
 
       const pointerType = e.pointerType as 'mouse' | 'touch' | 'pen';