fix(ui): start pointer drags only while the primary button is held (#1071)

On macOS, with an editable element focused and an input method active, WebKit can deliver a tap as pointerup then pointerdown, so drag trackers saw every later pointermove as a held button: one tap plus a pointer move started a phantom drag (file drag label, tab detach, tool window move) and the next tap dropped it. A drag now starts only from a move with the primary button down, a move without it cancels the press, and late button-less moves after a drag started are ignored so the drop is kept. Resizers, dialog drag/resize, pan and the review gutter end instead; the Project view also listens for pointercancel.

Refs #760

Co-authored-by: ntbang0901 <[email protected]>

src/ui/pointerDrag.test.ts

@@ -1,5 +1,53 @@
-import { describe, expect, it } from "vitest";
-import { dropZoneAt, isOutsideWindow } from "./pointerDrag";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { dropZoneAt, isOutsideWindow, startPointerDrag } from "./pointerDrag";
+
+const fire = (type: string, buttons: number, x = 0, y = 0) =>
+  window.dispatchEvent(new MouseEvent(type, { bubbles: true, buttons, clientX: x, clientY: y }));
+
+describe("startPointerDrag with a reordered macOS tap", () => {
+  beforeEach(() => {
+    document.elementFromPoint = () => null; // jsdom lacks it; drop hit-testing needs it
+  });
+  afterEach(() => (document.body.innerHTML = ""));
+  const start = () => {
+    const source = document.body.appendChild(document.createElement("div"));
+    const onStart = vi.fn();
+    const onEnd = vi.fn();
+    startPointerDrag(
+      { button: 0, clientX: 0, clientY: 0, altKey: false },
+      source,
+      { type: "t", payload: "" },
+      { onStart, onEnd },
+    );
+    return { onStart, onEnd };
+  };
+
+  it("never starts a drag from moves with no button held", () => {
+    const { onStart, onEnd } = start();
+    fire("pointermove", 0, 40, 0);
+    fire("pointerup", 0, 40, 0);
+    expect(onStart).not.toHaveBeenCalled();
+    expect(onEnd).toHaveBeenCalledOnce();
+    expect(onEnd).toHaveBeenCalledWith(false);
+    expect(document.querySelector("[aria-hidden]")).toBeNull();
+  });
+
+  it("drags and drops while the button is held", () => {
+    const { onStart, onEnd } = start();
+    fire("pointermove", 1, 40, 0);
+    fire("pointerup", 0, 40, 0);
+    expect(onStart).toHaveBeenCalledOnce();
+    expect(onEnd).toHaveBeenCalledWith(true, expect.objectContaining({ x: 40 }));
+  });
+
+  it("keeps the drop when late moves arrive after the button was released", () => {
+    const { onEnd } = start();
+    fire("pointermove", 1, 40, 0);
+    fire("pointermove", 0, 60, 0);
+    fire("pointerup", 0, 60, 0);
+    expect(onEnd).toHaveBeenCalledWith(true, expect.objectContaining({ x: 60 }));
+  });
+});
 
 const viewport = { left: 0, top: 0, right: 1280, bottom: 800 };