From 7b0180450b7567b656aeeb52acb07bcbed00b8ea Mon Sep 17 00:00:00 2001
From: Evan <evan.wilkinson@gmail.com>
Date: Mon, 10 Nov 2025 11:37:02 -0500
Subject: [PATCH] fix(Nav): ensure scroll buttons respond to window resize in
 horizontal nav
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Fixes #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 <noreply@anthropic.com>
---
 packages/react-core/src/components/Nav/NavList.tsx | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/packages/react-core/src/components/Nav/NavList.tsx b/packages/react-core/src/components/Nav/NavList.tsx
index 877363556e4..abc79f03732 100644
--- a/packages/react-core/src/components/Nav/NavList.tsx
+++ b/packages/react-core/src/components/Nav/NavList.tsx
@@ -4,7 +4,7 @@ import { css } from '@patternfly/react-styles';
 import { Button } from '../Button';
 import AngleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-left-icon';
 import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
-import { getLanguageDirection, isElementInView } from '../../helpers/util';
+import { debounce, getLanguageDirection, isElementInView } from '../../helpers/util';
 import { NavContext } from './Nav';
 import { PageSidebarContext } from '../Page/PageSidebar';
 import { getResizeObserver } from '../../helpers/resizeObserver';
@@ -38,6 +38,7 @@ class NavList extends Component<NavListProps> {
 
   navList = createRef<HTMLUListElement>();
   observer: any = () => {};
+  handleWindowResize: any;
 
   handleScrollButtons = () => {
     const container = this.navList.current;
@@ -108,11 +109,18 @@ class NavList extends Component<NavListProps> {
   componentDidMount() {
     this.observer = getResizeObserver(this.navList.current, this.handleScrollButtons, true);
     this.direction = getLanguageDirection(this.navList.current);
+    // Add window resize listener to handle cases where the window resizes but the container doesn't
+    // This ensures scroll buttons appear/disappear when the window size changes
+    this.handleWindowResize = debounce(this.handleScrollButtons, 250);
+    window.addEventListener('resize', this.handleWindowResize);
     this.handleScrollButtons();
   }
 
   componentWillUnmount() {
     this.observer();
+    if (this.handleWindowResize) {
+      window.removeEventListener('resize', this.handleWindowResize);
+    }
   }
 
   componentDidUpdate() {