[FIX] bottom_bar: ensure active sheet is scrolled into view

Previously, selecting a sheet from the menu did not scroll the bottom bar's sheet list to bring the active sheet into view if it was outside the visible area. This commit resolves the issue by automatically scrolling the sheet list to ensure the active sheet is visible. closes #5345 Task: 4377840 Signed-off-by: Rémi Rahir (rar) <[email protected]>
odoo · Dec 28, 2024 · 54c59ca · 54c59ca
1 parent 820f3cf
commit 54c59ca
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 7 deletions.
diff --git a/src/components/bottom_bar_sheet/bottom_bar_sheet.ts b/src/components/bottom_bar_sheet/bottom_bar_sheet.ts
@@ -1,4 +1,4 @@
-import { Component, onMounted, onPatched, useRef, useState } from "@odoo/owl";
+import { Component, onPatched, useEffect, useRef, useState } from "@odoo/owl";
 import { BOTTOMBAR_HEIGHT } from "../../constants";
 import { interactiveRenameSheet } from "../../helpers/ui/sheet_interactive";
 import { getSheetMenuRegistry } from "../../registries";
@@ -76,17 +76,21 @@ export class BottomBarSheet extends Component<Props, SpreadsheetChildEnv> {
   private editionState: "initializing" | "editing" = "initializing";
 
   setup() {
-    onMounted(() => {
-      if (this.isSheetActive) {
-        this.scrollToSheet();
-      }
-    });
     onPatched(() => {
       if (this.sheetNameRef.el && this.state.isEditing && this.editionState === "initializing") {
         this.editionState = "editing";
         this.focusInputAndSelectContent();
       }
     });
+
+    useEffect(
+      (sheetId) => {
+        if (this.props.sheetId === sheetId) {
+          this.scrollToSheet();
+        }
+      },
+      () => [this.env.model.getters.getActiveSheetId()]
+    );
   }
 
   private focusInputAndSelectContent() {
@@ -105,7 +109,10 @@ export class BottomBarSheet extends Component<Props, SpreadsheetChildEnv> {
   }
 
   private scrollToSheet() {
-    this.sheetDivRef.el?.scrollIntoView?.();
+    this.sheetDivRef.el?.scrollIntoView?.({
+      behavior: "smooth",
+      inline: "nearest",
+    });
   }
 
   onFocusOut() {

diff --git a/tests/bottom_bar/bottom_bar_component.test.ts b/tests/bottom_bar/bottom_bar_component.test.ts
@@ -604,6 +604,23 @@ describe("BottomBar component", () => {
       simulateClick(".o-bottom-bar-arrow-left");
       expect(scrollTo).toBe(200);
     });
+
+    test("Selecting a sheet from the context menu scrolls to that sheet", async () => {
+      const mockScrollIntoView = jest.fn();
+      HTMLElement.prototype.scrollIntoView = mockScrollIntoView;
+
+      expect(model.getters.getActiveSheetId()).toBe("Sheet1");
+
+      await click(fixture, ".o-list-sheets");
+      await click(fixture, ".o-menu-item[data-name='Sheet6']");
+
+      expect(model.getters.getActiveSheetId()).toBe("Sheet6");
+
+      const sheet6Element = fixture.querySelector(".o-sheet[data-id='Sheet6']");
+      expect(mockScrollIntoView).toHaveBeenCalledWith({ behavior: "smooth", inline: "nearest" });
+      expect(mockScrollIntoView).toHaveBeenCalledTimes(1);
+      expect(mockScrollIntoView.mock.instances[0]).toBe(sheet6Element);
+    });
   });
 
   test("Display the statistic button only if no-empty cells are selected", async () => {