[FIX] headers_overlay: disable interaction in read-only mode

src/components/headers_overlay/headers_overlay.ts

@@ -142,7 +142,12 @@ abstract class AbstractResizer extends Component<ResizerProps, SpreadsheetChildE
   }
 
   onMouseMove(ev: MouseEvent) {
-    if (this.state.isResizing || this.state.isMoving || this.state.isSelecting) {
+    if (
+      this.env.model.getters.isReadonly() ||
+      this.state.isResizing ||
+      this.state.isMoving ||
+      this.state.isSelecting
+    ) {
       return;
     }
     this._computeHandleDisplay(ev);
@@ -200,6 +205,10 @@ abstract class AbstractResizer extends Component<ResizerProps, SpreadsheetChildE
     if (index < 0) {
       return;
     }
+    if (this.env.model.getters.isReadonly()) {
+      this._selectElement(index, false);
+      return;
+    }
     if (this.state.waitingForMove === true) {
       if (!this.env.model.getters.isGridSelectionActive()) {
         this._selectElement(index, false);

tests/grid/grid_overlay_component.test.ts

@@ -27,6 +27,7 @@ import {
 import {
   edgeScrollDelay,
   selectColumnByClicking,
+  simulateClick,
   triggerMouseEvent,
 } from "../test_helpers/dom_helper";
 import { getEvaluatedCell, getSelectionAnchorCellXc } from "../test_helpers/getters_helpers";
@@ -649,6 +650,20 @@ describe("Resizer component", () => {
     await nextTick();
     expect(fixture.querySelector(".o-context-menu")).toBeFalsy();
   });
+
+  test("Can open context menu in readonly", async () => {
+    model.updateMode("readonly");
+    triggerMouseEvent(".o-overlay .o-col-resizer", "contextmenu", 10, 10);
+    await nextTick();
+    expect(fixture.querySelector(".o-menu")).toBeTruthy();
+  });
+
+  test("Cannot resize a column in readonly", async () => {
+    model.updateMode("readonly");
+    triggerMouseEvent(".o-overlay .o-col-resizer", "mousemove", DEFAULT_CELL_WIDTH, 10);
+    await nextTick();
+    expect(fixture.querySelector(".o-overlay .o-col-resizer .o-handle")).toBeNull();
+  });
 });
 describe("Hide/show columns", () => {
   beforeEach(async () => {
@@ -1114,6 +1129,15 @@ describe("move selected element(s)", () => {
       expect(getEvaluatedCell(model, "C1").value).toBe("c1");
       expect(getEvaluatedCell(model, "D1").value).toBe("d1");
     });
+
+    test("Can select a column but not move move it in readonly", async () => {
+      model.updateMode("readonly");
+      await selectColumnByClicking(model, "A", {});
+      expect(model.getters.getActiveCols()).toEqual(new Set([0]));
+
+      await simulateClick(".o-overlay .o-col-resizer", 10, 10);
+      expect(fixture.querySelector(".o-overlay .o-col-resizer")?.classList).not.toContain("o-grab");
+    });
   });
 
   describe("move selected row(s)", () => {