diff --git a/packages/fiori/src/DynamicPage.ts b/packages/fiori/src/DynamicPage.ts index 587367c267a5..9142c9530a78 100644 --- a/packages/fiori/src/DynamicPage.ts +++ b/packages/fiori/src/DynamicPage.ts @@ -188,6 +188,7 @@ class DynamicPage extends UI5Element { skipSnapOnScroll = false; showHeaderInStickArea = false; isToggled = false; + _focusInHandler?: (e: FocusEvent) => void; @property({ type: Boolean }) _headerSnapped = false; @@ -220,13 +221,46 @@ class DynamicPage extends UI5Element { this.scrollContainer.style.setProperty("scroll-padding-block-end", `${footerHeight}px`); if (this._headerSnapped) { - this.scrollContainer.style.setProperty("scroll-padding-block-start", `${titleHeight}px`); + this.scrollContainer.style.setProperty("scroll-padding-block-start", `${titleHeight}px`); } else { - this.scrollContainer.style.setProperty("scroll-padding-block-start", `${headerHeight + titleHeight}px`); + this.scrollContainer.style.setProperty("scroll-padding-block-start", `${headerHeight + titleHeight}px`); } } } + onAfterRendering() { + if (this.scrollContainer) { + if (this._focusInHandler) { + this.scrollContainer.removeEventListener("focusin", this._focusInHandler); + } + + this._focusInHandler = (e: FocusEvent) => { + const target = e.target as HTMLElement; + + if (!target || target === this.scrollContainer) { + return; + } + + if (this.dynamicPageHeader?.contains(target) || this.dynamicPageTitle?.contains(target)) { + return; + } + + requestAnimationFrame(() => { + target.scrollIntoView({ behavior: "smooth", block: "nearest" }); + }); + }; + + this.scrollContainer.addEventListener("focusin", this._focusInHandler); + } + } + + onExitDOM() { + if (this.scrollContainer && this._focusInHandler) { + this.scrollContainer.removeEventListener("focusin", this._focusInHandler); + this._focusInHandler = undefined; + } + } + get dynamicPageTitle(): DynamicPageTitle | null { return this.querySelector("[ui5-dynamic-page-title]"); }