patternfly-react icon indicating copy to clipboard operation
patternfly-react copied to clipboard

fix(Nav): ensure scroll buttons respond to window resize in horizontal nav

Open evwilkin opened this issue 1 month ago • 3 comments

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:

  1. 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.

  2. 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:

  1. Import debounce utility - Used to prevent excessive calls during rapid window resize
  2. Add handleWindowResize property - Stores the debounced handler for cleanup
  3. Enhanced componentDidMount() - Creates debounced resize handler and adds window listener
  4. 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:

  1. 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
  2. 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

evwilkin avatar Nov 10 '25 16:11 evwilkin

Preview: https://pf-react-pr-12132.surge.sh

A11y report: https://pf-react-pr-12132-a11y.surge.sh

patternfly-build avatar Nov 10 '25 16:11 patternfly-build

@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 avatar Dec 11 '25 19:12 thatblindgeye

@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.

mcoker avatar Dec 12 '25 02:12 mcoker

Nice catch @thatblindgeye and @mcoker , looks like this is no longer needed 👍

evwilkin avatar Dec 14 '25 22:12 evwilkin