diff --git a/src/components/grid_add_rows_footer/grid_add_rows_footer.xml b/src/components/grid_add_rows_footer/grid_add_rows_footer.xml index 491bdda551..842d4c6495 100644 --- a/src/components/grid_add_rows_footer/grid_add_rows_footer.xml +++ b/src/components/grid_add_rows_footer/grid_add_rows_footer.xml @@ -7,7 +7,8 @@ more rows at the bottom diff --git a/src/components/number_editor/number_editor.ts b/src/components/number_editor/number_editor.ts index fa0c00f481..f89319b044 100644 --- a/src/components/number_editor/number_editor.ts +++ b/src/components/number_editor/number_editor.ts @@ -9,6 +9,8 @@ import { useState, } from "@odoo/owl"; import { clip } from "../../helpers/index"; +import { Store, useStore } from "../../store_engine"; +import { DOMFocusableElementStore } from "../../stores/DOM_focus_store"; import { isChildEvent } from "../helpers/dom_helpers"; import { Popover, PopoverProps } from "../popover"; @@ -56,7 +58,11 @@ export class NumberEditor extends Component { private rootEditorRef = useRef("NumberEditor"); private valueListRef = useRef("numberList"); + private DOMFocusableElementStore!: Store; + setup() { + this.DOMFocusableElementStore = useStore(DOMFocusableElementStore); + useExternalListener(window, "click", this.onExternalClick, { capture: true }); onWillUpdateProps((nextProps) => { if (this.inputRef.el && document.activeElement !== this.inputRef.el) { @@ -133,5 +139,12 @@ export class NumberEditor extends Component { } this.props.onToggle?.(); } + if (ev.key === "Tab") { + ev.preventDefault(); + ev.stopPropagation(); + this.closeList(); + this.DOMFocusableElementStore.focus(); + return; + } } } diff --git a/src/components/number_editor/number_editor.xml b/src/components/number_editor/number_editor.xml index 9c83f773b0..1cd4faf5fe 100644 --- a/src/components/number_editor/number_editor.xml +++ b/src/components/number_editor/number_editor.xml @@ -5,7 +5,7 @@ class="o-number-editor d-flex align-items-center" t-att-class="props.class" t-att-title="props.title" - t-on-click="this.toggleList"> + t-on-click.stop="this.toggleList"> diff --git a/tests/spreadsheet/__snapshots__/spreadsheet_component.test.ts.snap b/tests/spreadsheet/__snapshots__/spreadsheet_component.test.ts.snap index 44f7dd38ca..ac7c3affe2 100644 --- a/tests/spreadsheet/__snapshots__/spreadsheet_component.test.ts.snap +++ b/tests/spreadsheet/__snapshots__/spreadsheet_component.test.ts.snap @@ -835,11 +835,13 @@ exports[`Simple Spreadsheet Component simple rendering snapshot 1`] = ` > @@ -1842,11 +1844,13 @@ exports[`components take the small screen into account 1`] = ` > diff --git a/tests/top_bar_component.test.ts b/tests/top_bar_component.test.ts index be5c2e5422..c1767e3eee 100644 --- a/tests/top_bar_component.test.ts +++ b/tests/top_bar_component.test.ts @@ -30,6 +30,7 @@ import { doubleClick, getElComputedStyle, getTextNodes, + keyDown, simulateClick, triggerMouseEvent, } from "./test_helpers/dom_helper"; @@ -451,6 +452,26 @@ describe("TopBar component", () => { expect(getStyle(model, "A1").fontSize).toBe(8); }); + test("Tab from font size editor closes the dropdown and moves focus to grid", async () => { + const { fixture } = await mountSpreadsheet(); + const input = fixture.querySelector("input.o-font-size") as HTMLInputElement; + input.focus(); + await nextTick(); + expect(fixture.querySelector(".o-popover .o-text-options")).toBeTruthy(); + await keyDown({ key: "Tab" }); + expect(fixture.querySelector(".o-popover .o-text-options")).toBeFalsy(); + const composerEl = fixture.querySelector(".o-grid-composer .o-composer")!; + expect(document.activeElement).toBe(composerEl); + }); + + test("Clicking the number editor dropdown arrow focuses the input", async () => { + const { fixture } = await mountSpreadsheet(); + const input = fixture.querySelector("input.o-font-size") as HTMLInputElement; + const icon = fixture.querySelectorAll(".o-number-editor .o-icon")[0] as HTMLElement; + await click(icon); + expect(document.activeElement).toBe(input); + }); + test("prevents default behavior of mouse wheel event on font size input", async () => { await mountParent(); const fontSizeInput = fixture.querySelector("input.o-font-size") as HTMLInputElement;