Package name
`@ui5/webcomponents-react`
UI5 Web Components for React version
`2.24.1`
Related
Description
In `mode="IconTabBar"`, when the user has already scrolled down to collapse the header and then switches to another tab, the collapsed header can no longer be re-expanded by scrolling up on the newly-selected tab. The user has to scroll down first, then back up, before the header expands again.
Reproduction
Live reproduction: https://stackblitz.com/edit/vitejs-vite-gxuja5mx?file=src%2Fmain.tsx
Steps:
- Render an `ObjectPage` with `mode="IconTabBar"` and multiple `ObjectPageSection`s, each with enough content to make the page scrollable.
- On the initial tab, scroll down until the header collapses.
- Click a different tab.
- Try to scroll up.
Expected: the collapsed header expands back into view as the user scrolls up (same as normal scroll-up behavior on a single tab).
Actual: page is stuck at `scrollTop === 0`. Scrolling up does nothing. User must scroll down first, then up, for the header spacer to reappear and let them re-expand.
Root cause (from reading the source)
In `packages/main/src/components/ObjectPage/index.tsx` (or the compiled `dist/components/ObjectPage/index.js` line ~743), the header-content-height spacer div's `height` is:
```js
(headerCollapsed && !headerPinned || scrolledHeaderExpanded)
&& !toggledCollapsedHeaderWasVisible
&& !(mode === ObjectPageMode.IconTabBar && scrollTimeout.current >= performance.now())
? `${headerContentHeight}px`
: 0
```
On section swap the code sets `scrollTimeout.current = performance.now() + 500` (see the branch commented "Reset scroll for section swap; scrollTimeout preserves current header collapsed/expanded state."). During that 500 ms window the last condition suppresses the spacer.
The fix for #8582 correctly stops the tab-switch-triggered `scrollToSection` from expanding the header. But it also removes the collapsed-state spacer from the scroll region, so users can't scroll up to re-expand the header on the new tab — they're forced to scroll down first.
Suggested fix directions
Happy to test a patched build.
Package name
`@ui5/webcomponents-react`
UI5 Web Components for React version
`2.24.1`
Related
Description
In `mode="IconTabBar"`, when the user has already scrolled down to collapse the header and then switches to another tab, the collapsed header can no longer be re-expanded by scrolling up on the newly-selected tab. The user has to scroll down first, then back up, before the header expands again.
Reproduction
Live reproduction: https://stackblitz.com/edit/vitejs-vite-gxuja5mx?file=src%2Fmain.tsx
Steps:
Expected: the collapsed header expands back into view as the user scrolls up (same as normal scroll-up behavior on a single tab).
Actual: page is stuck at `scrollTop === 0`. Scrolling up does nothing. User must scroll down first, then up, for the header spacer to reappear and let them re-expand.
Root cause (from reading the source)
In `packages/main/src/components/ObjectPage/index.tsx` (or the compiled `dist/components/ObjectPage/index.js` line ~743), the header-content-height spacer div's `height` is:
```js
(headerCollapsed && !headerPinned || scrolledHeaderExpanded)
&& !toggledCollapsedHeaderWasVisible
&& !(mode === ObjectPageMode.IconTabBar && scrollTimeout.current >= performance.now())
? `${headerContentHeight}px`
: 0
```
On section swap the code sets `scrollTimeout.current = performance.now() + 500` (see the branch commented "Reset scroll for section swap; scrollTimeout preserves current header collapsed/expanded state."). During that 500 ms window the last condition suppresses the spacer.
The fix for #8582 correctly stops the tab-switch-triggered `scrollToSection` from expanding the header. But it also removes the collapsed-state spacer from the scroll region, so users can't scroll up to re-expand the header on the new tab — they're forced to scroll down first.
Suggested fix directions
Happy to test a patched build.