[FIX] Composer: F4 handler should not bubble out of the composer

Since pull request 2126[^1], the shortcut F4 is handled by the grid
component. Unfortunately, the same shortcut is handled in the composer
as well and its propabation was not stopped. This means that a user
wanting to loop the references inside their formula could see some
unexpected side effects due to the grid replaying some commands.

[^1]: #2126

closes #4216

Task: 3916488
X-original-commit: be5500d
Signed-off-by: Lucas Lefèvre (lul) <lul@odoo.com>

src/components/composer/composer/composer.ts

@@ -183,7 +183,7 @@ export class Composer extends Component<ComposerProps, SpreadsheetChildEnv> {
     Enter: this.processEnterKey,
     Escape: this.processEscapeKey,
     F2: () => console.warn("Not implemented"),
-    F4: this.processF4Key,
+    F4: (ev: KeyboardEvent) => this.processF4Key(ev),
     Tab: (ev: KeyboardEvent) => this.processTabKey(ev),
   };
 
@@ -304,9 +304,10 @@ export class Composer extends Component<ComposerProps, SpreadsheetChildEnv> {
     this.env.model.dispatch("STOP_EDITION", { cancel: true });
   }
 
-  private processF4Key() {
+  private processF4Key(ev: KeyboardEvent) {
     this.env.model.dispatch("CYCLE_EDITION_REFERENCES");
     this.processContent();
+    ev.stopPropagation();
   }
 
   private processNumpadDecimal(ev: KeyboardEvent) {

tests/components/composer_integration.test.ts

@@ -9,7 +9,9 @@ import {
 import { colors, toHex, toZone } from "../../src/helpers";
 import {
   activateSheet,
+  copy,
   createSheet,
+  paste,
   renameSheet,
   resizeColumns,
   resizeRows,
@@ -30,6 +32,7 @@ import {
 import {
   getActivePosition,
   getActiveSheetFullScrollInfo,
+  getCellContent,
   getCellText,
   getSelectionAnchorCellXc,
 } from "../test_helpers/getters_helpers";
@@ -487,6 +490,19 @@ describe("Grid composer", () => {
     expect(document.activeElement).toBe(fixture.querySelector(".o-grid div.o-composer")!);
   });
 
+  test("pressing F4 loops the references without impacting the 'redo' feature of the grid", async () => {
+    setCellContent(model, "A1", "coucou");
+    setCellContent(model, "A2", "coucou2");
+    copy(model, "A1:A2");
+    paste(model, "A3:A4");
+    selectCell(model, "B1");
+    await startComposition("=C4");
+    model.dispatch("CHANGE_COMPOSER_CURSOR_SELECTION", { start: 1, end: 1 });
+    await nextTick();
+    await keyDown({ key: "F4" });
+    expect(getCellContent(model, "B2")).toBe("");
+  });
+
   describe("grid composer basic style", () => {
     const composerContainerSelector = ".o-grid .o-grid-composer";