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 index da0e081ce1..16ea5f1b9b 100644 --- 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 { private DOMFocusableElementStore!: Store; 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 { }); 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 { } 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 index 9f45ce59e1..460e980f93 100644 --- a/tests/bottom_bar/bottom_bar_component.test.ts +++ b/tests/bottom_bar/bottom_bar_component.test.ts @@ -616,6 +616,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 () => {