[FIX] grid_overlay: clicking interactive icons should not trigger cell click

src/components/grid_overlay/grid_overlay.ts

@@ -248,12 +248,14 @@ export class GridOverlay extends Component<Props, SpreadsheetChildEnv> {
   }
 
   onCellClicked(zoomedMouseEvent: ZoomedMouseEvent<MouseEvent | PointerEvent>) {
-    const openedPopover = this.cellPopovers.persistentCellPopover;
-    const [col, row] = this.getCartesianCoordinates(zoomedMouseEvent);
     const clickedIcon = this.getInteractiveIconAtEvent(zoomedMouseEvent);
-    if (clickedIcon) {
+    if (clickedIcon?.onClick) {
       this.env.model.selection.getBackToDefault();
+      clickedIcon.onClick(clickedIcon.position, this.env);
+      return;
     }
+
+    const [col, row] = this.getCartesianCoordinates(zoomedMouseEvent);
     this.props.onCellClicked(
       col,
       row,
@@ -264,10 +266,7 @@ export class GridOverlay extends Component<Props, SpreadsheetChildEnv> {
       zoomedMouseEvent
     );
 
-    if (clickedIcon?.onClick) {
-      clickedIcon.onClick(clickedIcon.position, this.env);
-    }
-
+    const openedPopover = this.cellPopovers.persistentCellPopover;
     if (
       zoomedMouseEvent.ev.target === this.gridOverlay.el &&
       this.cellPopovers.isOpen &&

src/registries/interactive_icon_on_cell_registry.ts

@@ -20,6 +20,8 @@ iconsOnCellRegistry.add("filter_icon", (getters, position) => {
       margin: GRID_ICON_MARGIN,
       position,
       onClick: (position, env) => {
+        const { col, row } = position;
+        env.model.selection.selectCell(col, row);
         const cellPopovers = env.getStore(CellPopoverStore);
         const activePopover = cellPopovers.persistentCellPopover;
         if (

tests/grid/grid_overlay_component.test.ts

@@ -10,6 +10,7 @@ import {
 import { Model } from "@odoo/o-spreadsheet-engine/model";
 import { SpreadsheetChildEnv } from "@odoo/o-spreadsheet-engine/types/spreadsheet_env";
 import { CellComposerStore } from "../../src/components/composer/composer/cell_composer_store";
+import { GridOverlay } from "../../src/components/grid_overlay/grid_overlay";
 import { ColResizer, RowResizer } from "../../src/components/headers_overlay/headers_overlay";
 import { lettersToNumber, toXC, toZone } from "../../src/helpers/index";
 import {
@@ -35,7 +36,13 @@ import {
   triggerMouseEvent,
 } from "../test_helpers/dom_helper";
 import { getEvaluatedCell, getSelectionAnchorCellXc } from "../test_helpers/getters_helpers";
-import { mountSpreadsheet, nextTick, target, typeInComposerGrid } from "../test_helpers/helpers";
+import {
+  mountComponent,
+  mountSpreadsheet,
+  nextTick,
+  target,
+  typeInComposerGrid,
+} from "../test_helpers/helpers";
 
 let fixture: HTMLElement;
 let model: Model;
@@ -1338,3 +1345,32 @@ describe("Can select de-select headers", () => {
     expect(model.getters.getActiveRows()).toEqual(new Set([0, 1, 3, 4]));
   });
 });
+
+test("GridOverlay: clicking an icon should NOT trigger props onCellClicked", async () => {
+  const onCellClicked = jest.fn();
+  const iconOnClick = jest.fn();
+  const { parent } = await mountComponent(GridOverlay, {
+    props: {
+      onCellClicked,
+      onGridMoved: () => {},
+      gridOverlayDimensions: "1000x800",
+      getGridSize: () => ({ width: 1000, height: 800 }),
+
+      // Required only to satisfy TS
+      onCellDoubleClicked: () => {},
+      onCellRightClicked: () => {},
+      onGridResized: () => {},
+    },
+  });
+
+  const comp: any = parent;
+  comp.getInteractiveIconAtEvent = () => ({
+    position: { col: 1, row: 1 },
+    onClick: iconOnClick,
+  });
+
+  // Fake click event
+  comp.onCellClicked({ ev: new MouseEvent("click") });
+  expect(iconOnClick).toHaveBeenCalled();
+  expect(onCellClicked).not.toHaveBeenCalled();
+});