diff --git a/packages/main/src/components/ObjectPage/ObjectPage.cy.tsx b/packages/main/src/components/ObjectPage/ObjectPage.cy.tsx index 197cb989e7e..9346e351627 100644 --- a/packages/main/src/components/ObjectPage/ObjectPage.cy.tsx +++ b/packages/main/src/components/ObjectPage/ObjectPage.cy.tsx @@ -259,7 +259,7 @@ describe('ObjectPage', () => { it('scroll to sections - default mode', () => { document.body.style.margin = '0px'; cy.mount( - + {OPContent} ); @@ -287,7 +287,12 @@ describe('ObjectPage', () => { cy.findByText('Job Relationship').should('be.visible'); cy.mount( - + {OPContent} ); @@ -331,7 +336,7 @@ describe('ObjectPage', () => { titleArea={DPTitle} headerArea={DPContent} mode={ObjectPageMode.IconTabBar} - style={{ height: '100vh' }} + style={{ height: '100vh', scrollBehavior: 'auto' }} > {OPContent} @@ -361,7 +366,7 @@ describe('ObjectPage', () => { headerArea={DPContent} footerArea={Footer} mode={ObjectPageMode.IconTabBar} - style={{ height: '100vh' }} + style={{ height: '100vh', scrollBehavior: 'auto' }} > {OPContent} diff --git a/packages/main/src/components/ObjectPage/ObjectPage.mdx b/packages/main/src/components/ObjectPage/ObjectPage.mdx index b0cdd81ef7e..124610cc9a1 100644 --- a/packages/main/src/components/ObjectPage/ObjectPage.mdx +++ b/packages/main/src/components/ObjectPage/ObjectPage.mdx @@ -7,11 +7,14 @@ import { ObjectPageHeader } from '../ObjectPageHeader'; import { ObjectPageSection } from '../ObjectPageSection'; import { ObjectPageSubSection } from '../ObjectPageSubSection'; import { CodeBlock } from '@sb/components/DomRefTable'; +import { MessageStrip } from '@ui5/webcomponents-react'; + + ## Example diff --git a/packages/main/src/components/ObjectPage/ObjectPage.module.css b/packages/main/src/components/ObjectPage/ObjectPage.module.css index f916d6998e5..02a04e192ef 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 937a783b8bb..d5bf1a8eb9f 100644 --- a/packages/main/src/components/ObjectPage/index.tsx +++ b/packages/main/src/components/ObjectPage/index.tsx @@ -334,8 +334,10 @@ const ObjectPage = forwardRef((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'; } }; @@ -345,7 +347,7 @@ const ObjectPage = forwardRef((props, ref return; } if (firstSectionId === sectionId) { - objectPageRef.current?.scrollTo({ top: 0, behavior: 'smooth' }); + objectPageRef.current?.scrollTo({ top: 0 }); } else { scrollToSectionById(sectionId); } @@ -729,6 +731,7 @@ const ObjectPage = forwardRef((props, ref style={objectPageStyles} ref={componentRef} onScroll={onObjectPageScroll} + data-in-iframe={window && window.self !== window.top} {...propsWithoutOmitted} >