[IMP] drag&drop: stop dragging on every mouse up event

If the drag & drop is started, and that the mouse is released over
an element that stops the event propagation, the drag & drop
will not be stopped. This is less than ideal.

Task: 4674384
Part-of: #6111
Signed-off-by: Lucas Lefèvre (lul) <[email protected]>

Author: hokolomopo

src/components/helpers/drag_and_drop.ts

@@ -7,7 +7,7 @@ type EventFn = (ev: PointerEvent) => void;
  */
 export function startDnd(onPointerMove: EventFn, onPointerUp: EventFn) {
   const removeListeners = () => {
-    window.removeEventListener("pointerup", _onPointerUp);
+    window.removeEventListener("pointerup", _onPointerUp, { capture: true });
     window.removeEventListener("dragstart", _onDragStart);
     window.removeEventListener("pointermove", onPointerMove);
     window.removeEventListener("wheel", onPointerMove);
@@ -19,7 +19,7 @@ export function startDnd(onPointerMove: EventFn, onPointerUp: EventFn) {
   function _onDragStart(ev: DragEvent) {
     ev.preventDefault();
   }
-  window.addEventListener("pointerup", _onPointerUp);
+  window.addEventListener("pointerup", _onPointerUp, { capture: true });
   window.addEventListener("dragstart", _onDragStart);
   window.addEventListener("pointermove", onPointerMove);
   // mouse wheel on window is by default a passive event.

tests/grid/grid_drag_and_drop_component.test.ts

@@ -418,6 +418,17 @@ test("Drag&drop is stopped when the calling component is unmounted", async () =>
   expect(spyRemoveEventListener).toHaveBeenCalledTimes(4);
 });
 
+test("Drag&drop is stopped when mouseup is called on an element that stops pointer events", async () => {
+  const div = document.createElement("div");
+  div.id = "test-div";
+  div.addEventListener("pointerup", (ev) => ev.stopPropagation());
+  document.body.appendChild(div);
+  triggerMouseEvent(".o-fake-grid", "pointerdown", 0, 0);
+  expect(mouseUpFn).toHaveBeenCalledTimes(0);
+  triggerMouseEvent("#test-div", "pointerup", 0, 0);
+  expect(mouseUpFn).toHaveBeenCalledTimes(1);
+});
+
 test("drag And Drop is based on the current active sheet", async () => {
   setViewportOffset(model, 6 * DEFAULT_CELL_WIDTH, 6 * DEFAULT_CELL_HEIGHT);
   hideColumns(model, [numberToLetters(5)]);