From a5dea6b29290a319a468c3cdd0a9015c3c4b8757 Mon Sep 17 00:00:00 2001 From: Lukas Harbarth Date: Mon, 1 Jul 2024 12:26:56 +0200 Subject: [PATCH] fix(DynamicPage): always show focused element when Tabbing in content. --- .../components/DynamicPage/DynamicPage.module.css | 5 +++++ packages/main/src/components/DynamicPage/index.tsx | 12 ++++++------ 2 files changed, 11 insertions(+), 6 deletions(-) diff --git a/packages/main/src/components/DynamicPage/DynamicPage.module.css b/packages/main/src/components/DynamicPage/DynamicPage.module.css index d403ffcacd1..6f39b4e1311 100644 --- a/packages/main/src/components/DynamicPage/DynamicPage.module.css +++ b/packages/main/src/components/DynamicPage/DynamicPage.module.css @@ -13,6 +13,11 @@ --_ui5wcr_DynamicPage_title_fontsize: var(--sapObjectHeader_Title_FontSize); } +.dynamicPage:has([data-component-name='DynamicPageFooter']) { + /* bar height + padding */ + scroll-padding-block-end: calc(var(--_ui5_bar_base_height) + 1rem); +} + .headerCollapsed { --_ui5wcr_DynamicPage_header_display: none; --_ui5wcr_DynamicPage_title_fontsize: var(--sapObjectHeader_Title_SnappedFontSize); diff --git a/packages/main/src/components/DynamicPage/index.tsx b/packages/main/src/components/DynamicPage/index.tsx index 6f77dd42154..115681125eb 100644 --- a/packages/main/src/components/DynamicPage/index.tsx +++ b/packages/main/src/components/DynamicPage/index.tsx @@ -319,12 +319,6 @@ const DynamicPage = forwardRef((props, ref } }; - const dynamicPageStyles = { ...style }; - if (headerCollapsed === true && headerContent) { - scrollTimeout.current = performance.now() + 200; - dynamicPageStyles[DynamicPageCssVariables.titleFontSize] = ThemingParameters.sapObjectHeader_Title_SnappedFontSize; - } - useEffect(() => { if (typeof onToggleHeaderContent === 'function' && isToggledRef.current) { onToggleHeaderContent(headerCollapsed !== true); @@ -336,6 +330,12 @@ const DynamicPage = forwardRef((props, ref ? (headerContentRef?.current?.offsetHeight ?? 0) + topHeaderHeight : topHeaderHeight; + const dynamicPageStyles = { ...style, scrollPaddingBlockStart: `calc(${top}px + 0.5rem)` }; + if (headerCollapsed === true && headerContent) { + scrollTimeout.current = performance.now() + 200; + dynamicPageStyles[DynamicPageCssVariables.titleFontSize] = ThemingParameters.sapObjectHeader_Title_SnappedFontSize; + } + return (