From cbb017a246543463d705dccbcabd1ae747034b10 Mon Sep 17 00:00:00 2001
From: Lukas Harbarth <lukas.harbarth@sap.com>
Date: Tue, 22 Oct 2024 11:48:07 +0200
Subject: [PATCH] fix(ObjectPage): support section selection in iframe (#6535)
Also fixes two flaky ObjectPage tests
---
.../src/components/ObjectPage/ObjectPage.cy.tsx | 13 +++++++++----
.../main/src/components/ObjectPage/ObjectPage.mdx | 3 +++
.../src/components/ObjectPage/ObjectPage.module.css | 3 +++
packages/main/src/components/ObjectPage/index.tsx | 9 ++++++---
4 files changed, 21 insertions(+), 7 deletions(-)
diff --git a/packages/main/src/components/ObjectPage/ObjectPage.cy.tsx b/packages/main/src/components/ObjectPage/ObjectPage.cy.tsx
index 29a84ee29a4..2e97a0a2c1b 100644
--- a/packages/main/src/components/ObjectPage/ObjectPage.cy.tsx
+++ b/packages/main/src/components/ObjectPage/ObjectPage.cy.tsx
@@ -242,7 +242,7 @@ describe('ObjectPage', () => {
it('scroll to sections - default mode', () => {
document.body.style.margin = '0px';
cy.mount(
- <ObjectPage headerTitle={DPTitle} headerContent={DPContent}>
+ <ObjectPage headerTitle={DPTitle} headerContent={DPContent} style={{ height: '100vh', scrollBehavior: 'auto' }}>
{OPContent}
</ObjectPage>
);
@@ -267,7 +267,12 @@ describe('ObjectPage', () => {
cy.findByText('Job Relationship').should('be.visible');
cy.mount(
- <ObjectPage headerTitle={DPTitle} headerContent={DPContent} footer={Footer}>
+ <ObjectPage
+ headerTitle={DPTitle}
+ headerContent={DPContent}
+ footer={Footer}
+ style={{ height: '100vh', scrollBehavior: 'auto' }}
+ >
{OPContent}
</ObjectPage>
);
@@ -311,7 +316,7 @@ describe('ObjectPage', () => {
headerTitle={DPTitle}
headerContent={DPContent}
mode={ObjectPageMode.IconTabBar}
- style={{ height: '100vh' }}
+ style={{ height: '100vh', scrollBehavior: 'auto' }}
>
{OPContent}
</ObjectPage>
@@ -341,7 +346,7 @@ describe('ObjectPage', () => {
headerContent={DPContent}
footer={Footer}
mode={ObjectPageMode.IconTabBar}
- style={{ height: '100vh' }}
+ style={{ height: '100vh', scrollBehavior: 'auto' }}
>
{OPContent}
</ObjectPage>
diff --git a/packages/main/src/components/ObjectPage/ObjectPage.mdx b/packages/main/src/components/ObjectPage/ObjectPage.mdx
index e6400250598..7706f62a297 100644
--- a/packages/main/src/components/ObjectPage/ObjectPage.mdx
+++ b/packages/main/src/components/ObjectPage/ObjectPage.mdx
@@ -6,11 +6,14 @@ import { DynamicPageTitle } from '../DynamicPageTitle';
import { DynamicPageHeader } from '../DynamicPageHeader';
import { ObjectPageSection } from '../ObjectPageSection';
import { ObjectPageSubSection } from '../ObjectPageSubSection';
+import { MessageStrip } from '@ui5/webcomponents-react';
<Meta of={ComponentStories} />
<DocsHeader subComponents={['DynamicPageTitle', 'DynamicPageHeader', 'ObjectPageSection', 'ObjectPageSubSection']} />
+<MessageStrip hideCloseButton children={'In iframes, smooth scrolling is disabled!'} />
+
## Example
<Canvas of={ComponentStories.Default} />
diff --git a/packages/main/src/components/ObjectPage/ObjectPage.module.css b/packages/main/src/components/ObjectPage/ObjectPage.module.css
index 872df8c3c53..5e7411f6390 100644
--- a/packages/main/src/components/ObjectPage/ObjectPage.module.css
+++ b/packages/main/src/components/ObjectPage/ObjectPage.module.css
@@ -16,6 +16,9 @@
overflow-x: hidden;
overflow-y: auto;
scroll-behavior: smooth;
+ &[data-in-iframe='true'] {
+ scroll-behavior: auto;
+ }
section[id*='ObjectPageSection-'] > div[role='heading'] {
display: none;
}
diff --git a/packages/main/src/components/ObjectPage/index.tsx b/packages/main/src/components/ObjectPage/index.tsx
index 1b82925d9e9..74b5a0fc5bc 100644
--- a/packages/main/src/components/ObjectPage/index.tsx
+++ b/packages/main/src/components/ObjectPage/index.tsx
@@ -319,8 +319,10 @@ const ObjectPage = forwardRef<HTMLDivElement, ObjectPagePropTypes>((props, ref)
TAB_CONTAINER_HEADER_HEIGHT +
(headerPinned && !headerCollapsed ? headerContentHeight : 0) +
'px';
- section.focus();
- section.scrollIntoView({ behavior: 'smooth' });
+ if (isSubSection) {
+ section.focus();
+ }
+ section.scrollIntoView();
section.style.scrollMarginBlockStart = '0px';
}
};
@@ -330,7 +332,7 @@ const ObjectPage = forwardRef<HTMLDivElement, ObjectPagePropTypes>((props, ref)
return;
}
if (firstSectionId === sectionId) {
- objectPageRef.current?.scrollTo({ top: 0, behavior: 'smooth' });
+ objectPageRef.current?.scrollTo({ top: 0 });
} else {
scrollToSectionById(sectionId);
}
@@ -766,6 +768,7 @@ const ObjectPage = forwardRef<HTMLDivElement, ObjectPagePropTypes>((props, ref)
style={objectPageStyles}
ref={componentRef}
onScroll={onObjectPageScroll}
+ data-in-iframe={window && window.self !== window.top}
{...propsWithoutOmitted}
>
<header