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;