Skip to content

Commit d086e13

Browse files
Lukas742Lukas742
authored
fix(ObjectPage): prevent header collapse on IconTabBar tab switch (#8587)
Fixes #8582
1 parent 1e977c3 commit d086e13

3 files changed

Lines changed: 43 additions & 14 deletions

File tree

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

Lines changed: 32 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -114,7 +114,7 @@ describe('ObjectPage', () => {
114114
cy.get('[ui5-tabcontainer]').findUi5TabByText('Section 15').should('have.attr', 'aria-selected', 'true');
115115

116116
if (mode === ObjectPageMode.Default) {
117-
cy.findByTestId('op').scrollTo(0, 4858);
117+
cy.findByTestId('op').scrollTo(0, 4878);
118118

119119
cy.findByText('Content 7').should('be.visible');
120120
cy.get('[ui5-tabcontainer]').findUi5TabByText('Section 7').should('have.attr', 'aria-selected', 'true');
@@ -124,7 +124,7 @@ describe('ObjectPage', () => {
124124
for (let i = 0; i < 15; i++) {
125125
cy.findByText('Add').click();
126126
}
127-
cy.findByTestId('op').scrollTo(0, 4858);
127+
cy.findByTestId('op').scrollTo(0, 4878);
128128

129129
cy.findByText('Content 7').should('be.visible');
130130
cy.get('[ui5-tabcontainer]').findUi5TabByText('Section 7').should('have.attr', 'aria-selected', 'true');
@@ -754,11 +754,11 @@ describe('ObjectPage', () => {
754754

755755
cy.mount(<TestSingleSectionComp height="2000px" withFooter mode={ObjectPageMode.Default} />);
756756
cy.findByText('Update Heights').click();
757-
cy.findByText('{"offset":1080,"scroll":2320}').should('exist');
757+
cy.findByText('{"offset":1080,"scroll":2330}').should('exist');
758758

759759
cy.findByTestId('op').scrollTo('bottom');
760760
cy.findByText('Update Heights').click({ force: true });
761-
cy.findByText('{"offset":1080,"scroll":2320}').should('exist');
761+
cy.findByText('{"offset":1080,"scroll":2330}').should('exist');
762762

763763
cy.mount(<TestSingleSectionComp height="400px" mode={ObjectPageMode.Default} />);
764764
cy.findByText('Update Heights').click();
@@ -812,19 +812,19 @@ describe('ObjectPage', () => {
812812
cy.get('[data-component-name="ObjectPageTabContainer"]').should('not.exist');
813813

814814
cy.findByText('Update Heights').click();
815-
cy.findByText('{"offset":1080,"scroll":2240}').should('exist');
815+
cy.findByText('{"offset":1080,"scroll":2250}').should('exist');
816816

817817
cy.findByTestId('op').scrollTo('bottom');
818818
cy.findByText('Update Heights').click({ force: true });
819-
cy.findByText('{"offset":1080,"scroll":2240}').should('exist');
819+
cy.findByText('{"offset":1080,"scroll":2250}').should('exist');
820820

821821
cy.mount(<TestSingleSectionComp height="2000px" withFooter mode={ObjectPageMode.IconTabBar} />);
822822
cy.findByText('Update Heights').click();
823-
cy.findByText('{"offset":1080,"scroll":2300}').should('exist');
823+
cy.findByText('{"offset":1080,"scroll":2310}').should('exist');
824824

825825
cy.findByTestId('op').scrollTo('bottom');
826826
cy.findByText('Update Heights').click({ force: true });
827-
cy.findByText('{"offset":1080,"scroll":2300}').should('exist');
827+
cy.findByText('{"offset":1080,"scroll":2310}').should('exist');
828828

829829
cy.mount(<TestSingleSectionComp height="400px" mode={ObjectPageMode.IconTabBar} />);
830830
cy.findByText('Update Heights').click();
@@ -1299,6 +1299,13 @@ describe('ObjectPage', () => {
12991299
>
13001300
Select Goals
13011301
</button>
1302+
<button
1303+
onClick={() => {
1304+
setSelectedSection(arbitraryCharsId);
1305+
}}
1306+
>
1307+
Select Employment
1308+
</button>
13021309
<button
13031310
onClick={() => {
13041311
setSelectedSubSection('personal-payment-information');
@@ -1349,7 +1356,9 @@ describe('ObjectPage', () => {
13491356
cy.wait(100);
13501357
cy.findByText('Select Goals').click();
13511358
cy.findByText('goals-content').should('be.visible');
1352-
cy.get('@change').should('have.callCount', callCount);
1359+
if (mode !== 'IconTabBar') {
1360+
cy.get('@change').should('have.callCount', callCount);
1361+
}
13531362
callCount++;
13541363
if (mode === 'IconTabBar') {
13551364
cy.findByText('personal-connect-content').should('not.exist');
@@ -1366,7 +1375,9 @@ describe('ObjectPage', () => {
13661375
}
13671376
cy.findByText('personal-connect-content').should('be.visible');
13681377
cy.get('[ui5-tabcontainer]').findUi5TabByText('Personal').should('have.attr', 'aria-selected', 'true');
1369-
cy.get('@change').should('have.callCount', callCount);
1378+
if (mode !== 'IconTabBar') {
1379+
cy.get('@change').should('have.callCount', callCount);
1380+
}
13701381
callCount++;
13711382

13721383
cy.get('[ui5-tabcontainer]').findUi5TabByText('Goals').click();
@@ -1377,14 +1388,23 @@ describe('ObjectPage', () => {
13771388
}
13781389
cy.findByText('goals-content').should('be.visible');
13791390
cy.get('[ui5-tabcontainer]').findUi5TabByText('Goals').should('have.attr', 'aria-selected', 'true');
1380-
cy.get('@change').should('have.callCount', callCount);
1391+
if (mode !== 'IconTabBar') {
1392+
cy.get('@change').should('have.callCount', callCount);
1393+
}
13811394
callCount++;
13821395

1396+
// Re-visiting a section should not collapse the header
1397+
if (mode === 'IconTabBar' && props.headerArea) {
1398+
cy.get('[data-component-name="ObjectPageHeaderContent"]').should('be.visible');
1399+
}
1400+
13831401
cy.findByText('Select Payment Information').click();
13841402
cy.findByText('personal-payment-information-content').should('be.visible');
13851403
cy.findByText('personal-connect-content').should('not.be.visible');
13861404
cy.get('[ui5-tabcontainer]').findUi5TabByText('Personal').should('have.attr', 'aria-selected', 'true');
1387-
cy.get('@change').should('have.callCount', callCount);
1405+
if (mode !== 'IconTabBar') {
1406+
cy.get('@change').should('have.callCount', callCount);
1407+
}
13881408
callCount++;
13891409
},
13901410
);

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

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -317,11 +317,16 @@ const ObjectPage = forwardRef<ObjectPageDomRef, ObjectPagePropTypes>((props, ref
317317
debouncedOnSectionChange.cancel();
318318
setSelectedSubSectionId(undefined);
319319
setInternalSelectedSectionId((prevSelectedSection) => {
320-
if (prevSelectedSection === newSelectionSectionId) {
320+
if (prevSelectedSection === newSelectionSectionId && mode !== ObjectPageMode.IconTabBar) {
321321
scrollToSection(newSelectionSectionId);
322322
}
323323
return newSelectionSectionId;
324324
});
325+
// Reset scroll for section swap; scrollTimeout preserves current header collapsed/expanded state.
326+
if (mode === ObjectPageMode.IconTabBar) {
327+
scrollTimeout.current = performance.now() + 500;
328+
objectPageRef.current?.scrollTo({ top: 0 });
329+
}
325330
setTabSelectId(newSelectionSectionId);
326331
scrollEvent.current = targetEvent;
327332
if (isMounted && mode === ObjectPageMode.Default) {
@@ -344,6 +349,7 @@ const ObjectPage = forwardRef<ObjectPageDomRef, ObjectPagePropTypes>((props, ref
344349
}
345350
};
346351
if (mode === ObjectPageMode.IconTabBar) {
352+
scrollTimeout.current = performance.now() + 500;
347353
setInternalSelectedSectionId(selectedSectionId);
348354
getSectionElementById(objectPageContentRef.current, false, selectedSectionId)?.focus({
349355
preventScroll: true,
@@ -890,7 +896,9 @@ const ObjectPage = forwardRef<ObjectPageDomRef, ObjectPagePropTypes>((props, ref
890896
<div
891897
style={{
892898
height:
893-
((headerCollapsed && !headerPinned) || scrolledHeaderExpanded) && !toggledCollapsedHeaderWasVisible
899+
((headerCollapsed && !headerPinned) || scrolledHeaderExpanded) &&
900+
!toggledCollapsedHeaderWasVisible &&
901+
!(mode === ObjectPageMode.IconTabBar && scrollTimeout.current >= performance.now())
894902
? `${headerContentHeight}px`
895903
: 0,
896904
}}

‎packages/main/src/components/ObjectPageSection/index.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -265,6 +265,7 @@ const ObjectPageSection = forwardRef<HTMLElement, ObjectPageSectionPropTypes>((p
265265
{children}
266266
</div>
267267
</div>
268+
<div className={classNames.outlineSpacerDiv} aria-hidden="true" />
268269
</section>
269270
);
270271
});

0 commit comments

Comments
 (0)