[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 #4218

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

src/components/composer/composer/composer.ts

@@ -219,7 +219,7 @@ export class Composer extends Component<ComposerProps, SpreadsheetChildEnv> {
     "Ctrl+Enter": this.processNewLineEvent,
     Escape: this.processEscapeKey,
     F2: () => console.warn("Not implemented"),
-    F4: this.processF4Key,
+    F4: (ev: KeyboardEvent) => this.processF4Key(ev),
     Tab: (ev: KeyboardEvent) => this.processTabKey(ev, "right"),
     "Shift+Tab": (ev: KeyboardEvent) => this.processTabKey(ev, "left"),
   };
@@ -353,9 +353,10 @@ export class Composer extends Component<ComposerProps, SpreadsheetChildEnv> {
     this.env.model.dispatch("CANCEL_EDITION");
   }
 
-  private processF4Key() {
+  private processF4Key(ev: KeyboardEvent) {
     this.env.model.dispatch("CYCLE_EDITION_REFERENCES");
     this.processContent();
+    ev.stopPropagation();
   }
 
   private processNumpadDecimal(ev: KeyboardEvent) {

tests/composer/composer_integration_component.test.ts

@@ -10,7 +10,9 @@ import { colors, toHex, toZone } from "../../src/helpers";
 import { ContentEditableHelper } from "../__mocks__/content_editable_helper";
 import {
   activateSheet,
+  copy,
   createSheet,
+  paste,
   renameSheet,
   resizeColumns,
   resizeRows,
@@ -32,6 +34,7 @@ import {
 import {
   getActivePosition,
   getActiveSheetFullScrollInfo,
+  getCellContent,
   getCellText,
   getSelectionAnchorCellXc,
 } from "../test_helpers/getters_helpers";
@@ -488,6 +491,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";