fix(Nav): ensure scroll buttons respond to window resize in horizontal nav
What
Closes #12047 - This PR fixes horizontal navigation scroll buttons not appearing/disappearing when the browser window is resized.
Problem Description
When using horizontal navigation, the scroll buttons (left/right arrows) were not responding to window resize events. This caused two issues:
-
Shrinking the window: When the window becomes narrow enough that nav items overflow, the scroll buttons don't appear until the user manually scrolls or focuses a nav item.
-
Expanding the window: When the window becomes wide enough that all nav items fit, the scroll buttons don't disappear until the user clicks on them.
Root Cause
The NavList component relies on a ResizeObserver that only monitors the nav list container element itself. When the browser window resizes but the container's dimensions don't change (common in flex/grid layouts), the ResizeObserver doesn't fire, so handleScrollButtons() is never called to update scroll button visibility.
How
Added a (debounced) window resize event listener alongside the existing ResizeObserver:
Changes in NavList.tsx:
- Import debounce utility - Used to prevent excessive calls during rapid window resize
- Add
handleWindowResizeproperty - Stores the debounced handler for cleanup - Enhanced
componentDidMount()- Creates debounced resize handler and adds window listener - Enhanced
componentWillUnmount()- Properly removes the window listener to prevent memory leaks
Approach
The fix implements dual monitoring:
- ResizeObserver: Provides immediate response when the container itself changes
- Window resize listener: Catches cases where window resize doesn't trigger container resize
- Debouncing (250ms): Prevents performance issues from rapid resize events
Manual Testing Steps
To verify the fix on the horizontal nav demo:
-
Test scroll buttons appear on shrink:
- Load the demo on a wide screen where scroll buttons don't show
- Shrink the window until nav items overflow
- ✅ Scroll buttons should now appear automatically
-
Test scroll buttons disappear on expand:
- Load the demo on a narrow screen where scroll buttons show
- Expand the window until all nav items fit
- ✅ Scroll buttons should now disappear automatically
🤖 Generated with Claude Code
Preview: https://pf-react-pr-12132.surge.sh
A11y report: https://pf-react-pr-12132-a11y.surge.sh
@mcoker @evwilkin before we merge this, can we double check this is still an issue? We closed https://github.com/patternfly/patternfly-react/issues/11751 on October 23rd and the issue linked to this PR sounds similar, so just want make sure there's still an issue to resolve (would have to check staging if the problem persists, though)
@thatblindgeye it looks like it was fixed already on staging by https://github.com/patternfly/patternfly-react/pull/12070/
Here's the staging URL to verify - https://staging.patternfly.org/components/navigation/react-demos/horizontal-nav/
I'd say this PR could be closed, though looks like this PR and #12070 have different fixes - not sure if that's something to consider before closing.
Nice catch @thatblindgeye and @mcoker , looks like this is no longer needed 👍