[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 #5389 Task: 4377840 X-original-commit: 2687f53 Signed-off-by: Dhrutik Patel (dhrp) <[email protected]> Signed-off-by: Rémi Rahir (rar) <[email protected]>
odoo · Dec 30, 2024 · 8688f93 · 8688f93
1 parent 089ee4f
commit 8688f93
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 7 deletions.
diff --git a/src/components/bottom_bar/bottom_bar_sheet/bottom_bar_sheet.ts b/src/components/bottom_bar/bottom_bar_sheet/bottom_bar_sheet.ts
@@ -1,4 +1,4 @@
-import { Component, onMounted, onPatched, useExternalListener, useRef, useState } from "@odoo/owl";
+import { Component, onPatched, useEffect, useExternalListener, useRef, useState } from "@odoo/owl";
 import { ACTION_COLOR, BOTTOMBAR_HEIGHT } from "../../../constants";
 import { interactiveRenameSheet } from "../../../helpers/ui/sheet_interactive";
 import { getSheetMenuRegistry } from "../../../registries";
@@ -97,11 +97,6 @@ export class BottomBarSheet extends Component<Props, SpreadsheetChildEnv> {
   private DOMFocusableElementStore!: Store<DOMFocusableElementStore>;
 
   setup() {
-    onMounted(() => {
-      if (this.isSheetActive) {
-        this.scrollToSheet();
-      }
-    });
     onPatched(() => {
       if (this.sheetNameRef.el && this.state.isEditing && this.editionState === "initializing") {
         this.editionState = "editing";
@@ -110,6 +105,15 @@ export class BottomBarSheet extends Component<Props, SpreadsheetChildEnv> {
     });
     this.DOMFocusableElementStore = useStore(DOMFocusableElementStore);
     useExternalListener(window, "click", () => (this.state.pickerOpened = false));
+
+    useEffect(
+      (sheetId) => {
+        if (this.props.sheetId === sheetId) {
+          this.scrollToSheet();
+        }
+      },
+      () => [this.env.model.getters.getActiveSheetId()]
+    );
   }
 
   private focusInputAndSelectContent() {
@@ -128,7 +132,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
@@ -612,6 +612,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 () => {