Skip to content

Conversation

@evwilkin
Copy link
Member

@evwilkin evwilkin commented Nov 10, 2025

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

…l nav

Fixes patternfly#12047

## Problem
Horizontal navigation scroll buttons (left/right arrows) were not
appearing or disappearing when the browser window was resized. This
occurred because the ResizeObserver only monitored the nav list
container element itself, not the window. When the window resized
but the container's dimensions didn't change (due to flex/grid
layouts), the ResizeObserver wouldn't fire and scroll button
visibility wasn't updated.

## Root Cause
In NavList.tsx, the component relied solely on a ResizeObserver
watching the nav list container. In scenarios where the window
resizes but the container size remains stable (common with
responsive layouts), the observer doesn't detect the change, so
handleScrollButtons() is never called to update scroll button state.

## Solution
Added a debounced window resize event listener alongside the existing
ResizeObserver to ensure scroll buttons update in all resize scenarios:

- ResizeObserver: Provides immediate response when container changes
- Window resize listener: Catches cases where window resize doesn't
  trigger container resize events
- Debouncing (250ms): Prevents performance issues from rapid resize
  events

The fix maintains backward compatibility and doesn't affect any
existing functionality (manual scrolling, keyboard navigation, etc.).

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <[email protected]>
@patternfly-build
Copy link
Contributor

patternfly-build commented Nov 10, 2025

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 - Horizontal nav - scrollbars don't respond to window.resize

2 participants