[REF] spreadsheet: move Ctrl+F handling to Grid component

The handling of the Ctrl+F key combination was done in the Spreadsheet
component. This made no sense as:

- the Spreadsheet component never has the Dom focus
- we needed to explicitly disable the shortcuts in dashboard mode

This commit moves the handling of the Ctrl+F key combination to the Grid
along all the other keyboard shortcuts. It's less code, and the behavior
is now automatically disabled in dashboard mode (since there is no
Grid component in dashboard mode).

closes #5101

Task: 3973671
Signed-off-by: Pierre Rousseau (pro) <[email protected]>

src/components/grid/grid.ts

@@ -347,6 +347,8 @@ export class Grid extends Component<Props, SpreadsheetChildEnv> {
     },
     "Ctrl+D": async () => this.env.model.dispatch("COPY_PASTE_CELLS_ABOVE"),
     "Ctrl+R": async () => this.env.model.dispatch("COPY_PASTE_CELLS_ON_LEFT"),
+    "Ctrl+H": () => this.sidePanel.open("FindAndReplace", {}),
+    "Ctrl+F": () => this.sidePanel.open("FindAndReplace", {}),
     "Ctrl+Shift+E": () => this.setHorizontalAlign("center"),
     "Ctrl+Shift+L": () => this.setHorizontalAlign("left"),
     "Ctrl+Shift+R": () => this.setHorizontalAlign("right"),

src/components/spreadsheet/spreadsheet.ts

@@ -59,7 +59,6 @@ import { SpreadsheetDashboard } from "../dashboard/dashboard";
 import { Grid } from "../grid/grid";
 import { HeaderGroupContainer } from "../header_group/header_group_container";
 import { css, cssPropertiesToCss } from "../helpers/css";
-import { isCtrlKey } from "../helpers/dom_helpers";
 import { useSpreadsheetRect } from "../helpers/position_hook";
 import { SidePanel } from "../side_panel/side_panel/side_panel";
 import { SidePanelStore } from "../side_panel/side_panel/side_panel_store";
@@ -353,8 +352,6 @@ export class Spreadsheet extends Component<SpreadsheetProps, SpreadsheetChildEnv
 
   private _focusGrid?: () => void;
 
-  private keyDownMapping!: { [key: string]: Function };
-
   private isViewportTooSmall: boolean = false;
   private notificationStore!: Store<NotificationStore>;
   private composerFocusStore!: Store<ComposerFocusStore>;
@@ -381,10 +378,6 @@ export class Spreadsheet extends Component<SpreadsheetProps, SpreadsheetChildEnv
     this.notificationStore = useStore(NotificationStore);
     this.composerFocusStore = useStore(ComposerFocusStore);
     this.sidePanel = useStore(SidePanelStore);
-    this.keyDownMapping = {
-      "CTRL+H": () => this.sidePanel.toggle("FindAndReplace", {}),
-      "CTRL+F": () => this.sidePanel.toggle("FindAndReplace", {}),
-    };
     const fileStore = this.model.config.external.fileStore;
     useSubEnv({
       model: this.model,
@@ -512,22 +505,6 @@ export class Spreadsheet extends Component<SpreadsheetProps, SpreadsheetChildEnv
     this._focusGrid();
   }
 
-  onKeydown(ev: KeyboardEvent) {
-    let keyDownString = "";
-    if (isCtrlKey(ev)) {
-      keyDownString += "CTRL+";
-    }
-    keyDownString += ev.key.toUpperCase();
-
-    let handler = this.keyDownMapping[keyDownString];
-    if (handler) {
-      ev.preventDefault();
-      ev.stopPropagation();
-      handler();
-      return;
-    }
-  }
-
   get gridHeight(): Pixel {
     const { height } = this.env.model.getters.getSheetViewDimension();
     return height;

src/components/spreadsheet/spreadsheet.xml

@@ -1,10 +1,6 @@
 <templates>
   <t t-name="o-spreadsheet-Spreadsheet">
-    <div
-      class="o-spreadsheet"
-      t-on-keydown="(ev) => !env.isDashboard() and this.onKeydown(ev)"
-      t-ref="spreadsheet"
-      t-att-style="getStyle()">
+    <div class="o-spreadsheet" t-ref="spreadsheet" t-att-style="getStyle()">
       <t t-if="env.isDashboard()">
         <SpreadsheetDashboard/>
       </t>

tests/spreadsheet/spreadsheet_component.test.ts

@@ -231,19 +231,6 @@ describe("Simple Spreadsheet Component", () => {
     jest.useRealTimers();
   });
 
-  test("Keydown is ineffective in dashboard mode", async () => {
-    ({ model, parent, fixture } = await mountSpreadsheet());
-    const spreadsheetKeyDown = jest.spyOn(parent, "onKeydown");
-    // const spreadsheetDiv = fixture.querySelector(".o-spreadsheet")!;
-    keyDown({ key: "H", ctrlKey: true });
-    expect(spreadsheetKeyDown).toHaveBeenCalled();
-    jest.clearAllMocks();
-    model.updateMode("dashboard");
-    await nextTick();
-    keyDown({ key: "H", ctrlKey: true });
-    expect(spreadsheetKeyDown).not.toHaveBeenCalled();
-  });
-
   test("Insert a function properly sets the edition", async () => {
     ({ model, parent, fixture, env } = await mountSpreadsheet());
     const composerStore = env.getStore(CellComposerStore);