Skip to content

fix: update useIsStuck to useEffect for prerendering, improve sticky tabs - #5119

Open
mcoker wants to merge 2 commits into
patternfly:mainfrom
mcoker:issue-5118
Open

mcoker wants to merge 2 commits into
patternfly:mainfrom
mcoker:issue-5118

Conversation

@mcoker

@mcoker mcoker commented Oct 15, 2026 •

Copy link
Copy Markdown
Contributor

fixes #5118

Updates useIsStuck.js to use useLayoutEffect when there is a browser window and useEffect when there isn't (for the prerendering step of the build), which suppresses all of the warnings the build was throwing.

Also took a stab at improving the dynamic sticky tabs behavior. The existing behavior is often flaky. It doesn't always make the tabs sticky when scrolling fast, landing on/going to page anchors, and other random times.

From the robots, this PR updates useIsStuck.js to:

  • Use comparable coordinates - Previously, the hook compared scrollElement.scrollTop with stickyElement.offsetTop. scrollTop is relative to the scrolling container, while offsetTop is relative to the element’s offset parent; those aren’t necessarily the same coordinate system. The hook now compares the tabs’ rendered top with the scrollport’s rendered top, so it checks whether the tabs are actually stuck at the container’s edge.
  • Clear stale state when elements are missing - If either DOM element can’t be found, the hook now resets both its ref and React state to false. This avoids leaving the stuck background enabled based on an earlier measurement.
  • The ref is also updated before scheduling the React state change, keeping its transition check aligned with the latest measurement.
  • Adds a window resize event listener to handle sticky behavior when the window resizes, which is most relevant on pages with a lot of content (that wraps differently on resize) above the tabs.

@patternfly-build

Copy link
Copy Markdown
Collaborator

Preview: https://pf-org--pr-5119-site.surge.sh

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Bug - docs framework - lots of prerender warnings during build

2 participants