Skip to content

ObjectPage in IconTabBar mode — collapsed header cannot be re-expanded by scroll-up after tab switch #8803

Description

@mbritof

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:

  1. Render an `ObjectPage` with `mode="IconTabBar"` and multiple `ObjectPageSection`s, each with enough content to make the page scrollable.
  2. On the initial tab, scroll down until the header collapses.
  3. Click a different tab.
  4. 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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions