Skip to content

Commit 7b01804

Browse files
evwilkinclaude
andcommitted
fix(Nav): ensure scroll buttons respond to window resize in horizontal nav
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>
1 parent 3fe4262 commit 7b01804

File tree

1 file changed

+9
-1
lines changed

1 file changed

+9
-1
lines changed

packages/react-core/src/components/Nav/NavList.tsx

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { css } from '@patternfly/react-styles';
44
import { Button } from '../Button';
55
import AngleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-left-icon';
66
import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
7-
import { getLanguageDirection, isElementInView } from '../../helpers/util';
7+
import { debounce, getLanguageDirection, isElementInView } from '../../helpers/util';
88
import { NavContext } from './Nav';
99
import { PageSidebarContext } from '../Page/PageSidebar';
1010
import { getResizeObserver } from '../../helpers/resizeObserver';
@@ -38,6 +38,7 @@ class NavList extends Component<NavListProps> {
3838

3939
navList = createRef<HTMLUListElement>();
4040
observer: any = () => {};
41+
handleWindowResize: any;
4142

4243
handleScrollButtons = () => {
4344
const container = this.navList.current;
@@ -108,11 +109,18 @@ class NavList extends Component<NavListProps> {
108109
componentDidMount() {
109110
this.observer = getResizeObserver(this.navList.current, this.handleScrollButtons, true);
110111
this.direction = getLanguageDirection(this.navList.current);
112+
// Add window resize listener to handle cases where the window resizes but the container doesn't
113+
// This ensures scroll buttons appear/disappear when the window size changes
114+
this.handleWindowResize = debounce(this.handleScrollButtons, 250);
115+
window.addEventListener('resize', this.handleWindowResize);
111116
this.handleScrollButtons();
112117
}
113118

114119
componentWillUnmount() {
115120
this.observer();
121+
if (this.handleWindowResize) {
122+
window.removeEventListener('resize', this.handleWindowResize);
123+
}
116124
}
117125

118126
componentDidUpdate() {

0 commit comments

Comments
 (0)