[FIX] topbar: close font size editor dropdown and focus grid

src/components/grid_add_rows_footer/grid_add_rows_footer.xml

@@ -7,7 +7,8 @@
       <button
         t-on-click="onConfirm"
         t-att-disabled="state.errorFlag"
-        class="o-button flex-grow-0 me-2">
+        class="o-button flex-grow-0 me-2"
+        tabindex="-1">
         Add
       </button>
       <input
@@ -19,6 +20,7 @@
         t-on-keydown.stop="onKeydown"
         t-on-pointerdown.stop=""
         t-on-input.stop="onInput"
+        tabindex="-1"
       />
       <span>more rows at the bottom</span>
       <ValidationMessages t-if="state.errorFlag" messages="errorMessages" msgType="'error'"/>

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<Props, SpreadsheetChildEnv> {
   private rootEditorRef = useRef("NumberEditor");
   private valueListRef = useRef("numberList");
 
+  private DOMFocusableElementStore!: Store<DOMFocusableElementStore>;
+
   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<Props, SpreadsheetChildEnv> {
       }
       this.props.onToggle?.();
     }
+    if (ev.key === "Tab") {
+      ev.preventDefault();
+      ev.stopPropagation();
+      this.closeList();
+      this.DOMFocusableElementStore.focus();
+      return;
+    }
   }
 }

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">
         <input
           type="number"
           t-att-min="props.min"

tests/grid/__snapshots__/grid_component.test.ts.snap

@@ -29,11 +29,13 @@ exports[`Grid component simple rendering snapshot 1`] = `
     >
       <button
         class="o-button flex-grow-0 me-2"
+        tabindex="-1"
       >
          Add 
       </button>
       <input
         class="o-grid-add-rows-input o-input mt-0 me-2"
+        tabindex="-1"
         type="text"
         value="100"
       />

tests/spreadsheet/__snapshots__/spreadsheet_component.test.ts.snap

@@ -835,11 +835,13 @@ exports[`Simple Spreadsheet Component simple rendering snapshot 1`] = `
           >
             <button
               class="o-button flex-grow-0 me-2"
+              tabindex="-1"
             >
                Add 
             </button>
             <input
               class="o-grid-add-rows-input o-input mt-0 me-2"
+              tabindex="-1"
               type="text"
               value="100"
             />
@@ -1842,11 +1844,13 @@ exports[`components take the small screen into account 1`] = `
           >
             <button
               class="o-button flex-grow-0 me-2"
+              tabindex="-1"
             >
                Add 
             </button>
             <input
               class="o-grid-add-rows-input o-input mt-0 me-2"
+              tabindex="-1"
               type="text"
               value="100"
             />

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<HTMLElement>(".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;