Skip to content

Commit 44f85c6

Browse files
committed
fix(ObjectPage): re-expand header on tab switch in IconTabBar mode
In IconTabBar mode, switching tabs while the header was collapsed by scrolling left the header permanently stuck — scrollTop was reset to 0 but headerCollapsed remained true with no scroll room to trigger re-expansion. Reset headerCollapsedInternal to false on tab switch so the header expands naturally alongside scrollTo({ top: 0 }). The existing scrollTimeout guard in useObserveHeights already prevents the programmatic scroll from immediately re-collapsing it. Also removes the redundant scrollTimeout clause from the spacer height condition, which was suppressing scroll room during the tab switch window.
1 parent 08b5baf commit 44f85c6

2 files changed

Lines changed: 32 additions & 3 deletions

File tree

packages/main/src/components/ObjectPage/ObjectPage.cy.tsx

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1931,6 +1931,36 @@ describe('ObjectPage', () => {
19311931
cy.findByText('Custom Header Section Two').should('not.be.visible');
19321932
cy.findByText('Subsection1').should('be.visible');
19331933
});
1934+
1935+
it('IconTabBar: header re-expands after tab switch when header was collapsed by scrolling', () => {
1936+
cy.viewport(1440, 900);
1937+
cy.mount(
1938+
<ObjectPage
1939+
data-testid="op"
1940+
titleArea={DPTitle}
1941+
headerArea={DPContent}
1942+
mode={ObjectPageMode.IconTabBar}
1943+
style={{ height: '100vh', scrollBehavior: 'auto' }}
1944+
>
1945+
<ObjectPageSection key="s1" id="s1" titleText="Section 1">
1946+
<div style={{ height: '2000px', background: 'lightblue' }}>section 1 content</div>
1947+
</ObjectPageSection>
1948+
<ObjectPageSection key="s2" id="s2" titleText="Section 2">
1949+
<div style={{ height: '2000px', background: 'lightyellow' }}>section 2 content</div>
1950+
</ObjectPageSection>
1951+
</ObjectPage>,
1952+
);
1953+
cy.wait(50);
1954+
1955+
// scroll down far enough to collapse the header
1956+
cy.findByTestId('op').scrollTo(0, 800);
1957+
cy.get('[data-component-name="ObjectPageHeaderContent"]').should('not.be.visible');
1958+
1959+
// switch tabs — header should re-expand and scroll should reset to top
1960+
cy.get('[ui5-tabcontainer]').findUi5TabByText('Section 2').click();
1961+
cy.wait(600);
1962+
cy.get('[data-component-name="ObjectPageHeaderContent"]').should('be.visible');
1963+
});
19341964
});
19351965

19361966
const DPTitle = (

packages/main/src/components/ObjectPage/index.tsx

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -322,9 +322,9 @@ const ObjectPage = forwardRef<ObjectPageDomRef, ObjectPagePropTypes>((props, ref
322322
}
323323
return newSelectionSectionId;
324324
});
325-
// Reset scroll for section swap; scrollTimeout preserves current header collapsed/expanded state.
326325
if (mode === ObjectPageMode.IconTabBar) {
327326
scrollTimeout.current = performance.now() + 500;
327+
setHeaderCollapsedInternal(false);
328328
objectPageRef.current?.scrollTo({ top: 0 });
329329
}
330330
setTabSelectId(newSelectionSectionId);
@@ -897,8 +897,7 @@ const ObjectPage = forwardRef<ObjectPageDomRef, ObjectPagePropTypes>((props, ref
897897
style={{
898898
height:
899899
((headerCollapsed && !headerPinned) || scrolledHeaderExpanded) &&
900-
!toggledCollapsedHeaderWasVisible &&
901-
!(mode === ObjectPageMode.IconTabBar && scrollTimeout.current >= performance.now())
900+
!toggledCollapsedHeaderWasVisible
902901
? `${headerContentHeight}px`
903902
: 0,
904903
}}

0 commit comments

Comments
 (0)