[FIX] Selection: Ignore keyboard events when selecting range in the grid

Currently, users can modify the input of a composer/selection input
while selecting a range in the grid. Those inputs can have side-effect
that are difficult to account for as the selection is managed in a hook
which is not aware of the related feature that it handles (selection,
cell reference, pivot reference, selection input). A recent work to fix
that: #7400

Overall, there is no added value to be able to mix writing text while
selecting ranges inside the grid so we simply disable that possibility
altogether.

Task: 5347297

Author: rrahir

src/components/helpers/drag_and_drop_grid_hook.ts

@@ -26,6 +26,10 @@ export function useDragAndDropBeyondTheViewport(env: SpreadsheetChildEnv) {
   let scrollDirection: DnDDirection = "all";
   const getters = env.model.getters;
 
+  const blockKeyboard = (ev: KeyboardEvent) => ev.preventDefault();
+  const cleanUpBlockKeyboard = () =>
+    removeEventListener("keydown", blockKeyboard, { capture: true });
+
   let cleanUpFns: (() => void)[] = [];
 
   const cleanUp = () => {
@@ -156,7 +160,9 @@ export function useDragAndDropBeyondTheViewport(env: SpreadsheetChildEnv) {
     pointerMoveCallback = onPointerMove;
     pointerUpCallback = onPointerUp;
 
-    cleanUpFns.push(startDnd(pointerMoveHandler, pointerUpHandler));
+    // block keyboard events during pointer interaction to avoid conflicts
+    addEventListener("keydown", blockKeyboard, { capture: true });
+    cleanUpFns.push(startDnd(pointerMoveHandler, pointerUpHandler), cleanUpBlockKeyboard);
   };
 
   onWillUnmount(() => {

tests/composer/composer_integration_component.test.ts

@@ -577,6 +577,16 @@ describe("Composer interactions", () => {
     createTable(model, "A1");
     expect(getTable(model, "A1")).toBeTruthy();
   });
+
+  test("keyboard inputs are disabled when selecting a range for the composer", async () => {
+    await typeInComposerGrid("=");
+    gridMouseEvent(model, "pointerdown", "C8");
+    gridMouseEvent(model, "pointermove", "B8");
+    await keyDown({ key: "A" });
+    gridMouseEvent(model, "pointerup", "B8");
+    await nextTick();
+    expect(composerStore.currentContent).toBe("=B8:C8");
+  });
 });
 
 describe("Grid composer", () => {

tests/grid/grid_drag_and_drop_component.test.ts

@@ -9,14 +9,17 @@ import {
   addColumns,
   addRows,
   createSheet,
-  deleteSheet,
   freezeColumns,
   freezeRows,
   hideColumns,
   hideRows,
   setViewportOffset,
 } from "../test_helpers/commands_helpers";
-import { edgeScrollDelay, triggerMouseEvent } from "../test_helpers/dom_helper";
+import {
+  edgeScrollDelay,
+  triggerKeyboardEvent,
+  triggerMouseEvent,
+} from "../test_helpers/dom_helper";
 import { mountComponent, nextTick } from "../test_helpers/helpers";
 
 // As we test an isolated component, grid and gridOverlay won't exist
@@ -416,7 +419,7 @@ test("Drag&drop is stopped when the calling component is unmounted", async () =>
   jest.advanceTimersByTime(advanceTimer);
   expect(selectedCol).toEqual(1);
   expect(mouseUpFn).toHaveBeenCalledTimes(1);
-  expect(spyRemoveEventListener).toHaveBeenCalledTimes(4);
+  expect(spyRemoveEventListener).toHaveBeenCalledTimes(5);
 });
 
 test("Drag&drop is stopped when mouseup is called on an element that stops pointer events", async () => {
@@ -454,27 +457,15 @@ test("drag And Drop is based on the current active sheet", async () => {
   });
 });
 
-test("drag And Drop is stopped if the current sheet is deleted", async () => {
-  setViewportOffset(model, 6 * DEFAULT_CELL_WIDTH, 6 * DEFAULT_CELL_HEIGHT);
-  createSheet(model, { sheetId: "sh2", activate: true });
-  setViewportOffset(model, 6 * DEFAULT_CELL_WIDTH, 6 * DEFAULT_CELL_HEIGHT);
-  await nextTick();
-
-  expect(model.getters.getActiveMainViewport()).toMatchObject({
-    left: 6,
-    right: 16,
-  });
-  const { height } = model.getters.getSheetViewDimension();
-  triggerMouseEvent(".o-fake-grid", "pointerdown", DEFAULT_CELL_WIDTH, 0.5 * height);
-  deleteSheet(model, "sh2");
-  await nextTick();
-  triggerMouseEvent(".o-fake-grid", "pointermove", -0.5 * DEFAULT_CELL_WIDTH, 0.5 * height);
-  const advanceTimer = edgeScrollDelay(0.5 * DEFAULT_CELL_WIDTH, 1);
-
-  jest.advanceTimersByTime(advanceTimer);
-  triggerMouseEvent(".o-fake-grid", "pointerup", -0.5 * DEFAULT_CELL_WIDTH, 0.5 * height);
-  expect(model.getters.getActiveMainViewport()).toMatchObject({
-    left: 6,
-    right: 16,
-  });
+test("keyboard inputs are blocked during Drag And Drop", async () => {
+  const target = document.querySelector(".o-fake-grid")!;
+  triggerMouseEvent(".o-fake-grid", "pointerdown");
+  let ev = triggerKeyboardEvent(target, "keydown", { key: "A" });
+  expect(ev.defaultPrevented).toBeTruthy();
+  triggerMouseEvent(".o-fake-grid", "pointermove");
+  ev = triggerKeyboardEvent(target, "keydown", { key: "A" });
+  expect(ev.defaultPrevented).toBeTruthy();
+  triggerMouseEvent(".o-fake-grid", "pointerup");
+  ev = triggerKeyboardEvent(target, "keydown", { key: "A" });
+  expect(ev.defaultPrevented).toBeFalsy();
 });

tests/test_helpers/dom_helper.ts

@@ -218,7 +218,7 @@ export function getGridIconEventPosition(model: Model, xc: string) {
 
 export async function clickGridIcon(model: Model, xc: string) {
   const { x, y } = getGridIconEventPosition(model, xc);
-  triggerMouseEvent(".o-grid-overlay", "pointerdown", x, y);
+  simulateClick(".o-grid-overlay", x, y);
   await nextTick();
 }
 
@@ -297,6 +297,7 @@ export function triggerKeyboardEvent(
 ) {
   const ev = new KeyboardEvent(type, { bubbles: true, cancelable: true, ...eventArgs });
   dispatchEvent(selector, ev);
+  return ev;
 }
 
 function dispatchEvent(selector: string | EventTarget, ev: Event) {