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

Pressing Tab in the font size editor could move focus to the hidden
“add more rows” footer. The browser then auto-scrolled to the footer
while the grid viewport state stayed unchanged, making the footer
appear floating above the grid.

The font size editor now closes its dropdown when it loses focus
(blur/Tab), and focus is redirected back to the grid instead of going
to the footer, preventing the layout from breaking when tabbing from
the toolbar.

Task: 5263792

Author: dhrp-odoo

src/components/font_size_editor/font_size_editor.ts

@@ -49,7 +49,6 @@ export class FontSizeEditor extends Component<Props, SpreadsheetChildEnv> {
 
   dropdown: State = useState({ isOpen: false });
 
-  private inputRef = useRef("inputFontSize");
   private rootEditorRef = useRef("FontSizeEditor");
 
   setup() {
@@ -70,7 +69,7 @@ export class FontSizeEditor extends Component<Props, SpreadsheetChildEnv> {
     const isOpen = this.dropdown.isOpen;
     if (!isOpen) {
       this.props.onToggle();
-      this.inputRef.el!.focus();
+      this.dropdown.isOpen = true;
     } else {
       this.closeFontList();
     }
@@ -110,6 +109,11 @@ export class FontSizeEditor extends Component<Props, SpreadsheetChildEnv> {
       this.props.onToggle();
     }
   }
+
+  onInputBlurred(ev: FocusEvent) {
+    this.closeFontList();
+    this.props.onToggle();
+  }
 }
 
 FontSizeEditor.props = {

src/components/font_size_editor/font_size_editor.xml

@@ -15,9 +15,9 @@
           t-on-wheel.prevent.stop=""
           t-on-click.stop=""
           t-on-focus.stop="onInputFocused"
+          t-on-blur="onInputBlurred"
           t-att-value="currentFontSize"
           t-on-change="setSizeFromInput"
-          t-ref="inputFontSize"
         />
         <span>
           <t t-call="o-spreadsheet-Icon.TRIANGLE_DOWN"/>

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 o-button-grey">
+        class="o-button o-button-grey"
+        tabindex="-1">
         Add
       </button>
       <input
@@ -19,6 +20,7 @@
         t-on-keydown.stop="onKeydown"
         t-on-mousedown.stop=""
         t-on-input.stop="onInput"
+        tabindex="-1"
       />
       <span>more rows at the bottom</span>
       <ValidationMessages t-if="state.errorFlag" messages="errorMessages" msgType="'error'"/>

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

@@ -27,11 +27,13 @@ exports[`Grid component simple rendering snapshot 1`] = `
     >
       <button
         class="o-button o-button-grey"
+        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

@@ -642,11 +642,13 @@ exports[`Simple Spreadsheet Component simple rendering snapshot 1`] = `
           >
             <button
               class="o-button o-button-grey"
+              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

@@ -339,6 +339,19 @@ describe("TopBar component", () => {
     expect(getStyle(model, "A1").fontSize).toBe(8);
   });
 
+  test("Tab from font size editor closes the dropdown", async () => {
+    const { fixture } = await mountSpreadsheet();
+    const input = fixture.querySelector("input.o-font-size") as HTMLInputElement;
+    input.focus();
+    await nextTick();
+    expect(fixture.querySelector(".o-dropdown-content.o-text-options")).toBeTruthy();
+    input.blur();
+    await nextTick();
+    expect(fixture.querySelector(".o-dropdown-content.o-text-options")).toBeFalsy();
+    const composerEl = fixture.querySelector<HTMLElement>(".o-grid-composer .o-composer")!;
+    expect(document.activeElement).toBe(composerEl);
+  });
+
   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;