From d09c96f3db816d62457a1dc136d713f17e2cd68b Mon Sep 17 00:00:00 2001 From: Mohamed Fall Date: Thu, 5 Mar 2026 16:15:21 +0000 Subject: [PATCH 1/3] fix(NavItem): close managed sidebar on mobile nav item click --- packages/react-core/src/components/Nav/NavItem.tsx | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 deletions(-) diff --git a/packages/react-core/src/components/Nav/NavItem.tsx b/packages/react-core/src/components/Nav/NavItem.tsx index c3f097e577a..17db1a5ecd5 100644 --- a/packages/react-core/src/components/Nav/NavItem.tsx +++ b/packages/react-core/src/components/Nav/NavItem.tsx @@ -15,6 +15,7 @@ import dividerStyles from '@patternfly/react-styles/css/components/Divider/divid import { css } from '@patternfly/react-styles'; import { NavContext, NavSelectClickHandler } from './Nav'; import { PageSidebarContext } from '../Page/PageSidebar'; +import { PageContext } from '../Page/PageContext'; import { useOUIAProps, OUIAProps } from '../../helpers'; import { Popper } from '../../helpers/Popper/Popper'; import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon'; @@ -81,6 +82,7 @@ const NavItemBase: React.FunctionComponent = ({ }: NavItemProps) => { const { flyoutRef, setFlyoutRef, navRef } = useContext(NavContext); const { isSidebarOpen } = useContext(PageSidebarContext); + const { isManagedSidebar, isMobile, onSidebarToggle } = useContext(PageContext); const [flyoutTarget, setFlyoutTarget] = useState(null); const [isHovered, setIsHovered] = useState(false); const _ref = useRef(undefined); @@ -193,13 +195,21 @@ const NavItemBase: React.FunctionComponent = ({ const tabIndex = isSidebarOpen ? null : -1; + const handleNavItemClick = (event: any, context: any, preventLinkDefault: boolean) => { + context.onSelect(event, groupId, itemId, to, preventLinkDefault, onClick); + + if (isManagedSidebar && isMobile && isSidebarOpen) { + onSidebarToggle(); + } + }; + const renderDefaultLink = (context: any): React.ReactNode => { const preventLinkDefault = preventDefault || !to; return ( context.onSelect(e, groupId, itemId, to, preventLinkDefault, onClick)} + onClick={(e: any) => handleNavItemClick(e, context, preventLinkDefault)} className={css( styles.navLink, isActive && styles.modifiers.current, @@ -220,7 +230,7 @@ const NavItemBase: React.FunctionComponent = ({ const renderClonedChild = (context: any, child: React.ReactElement): React.ReactNode => cloneElement(child, { - onClick: (e: MouseEvent) => context.onSelect(e, groupId, itemId, to, preventDefault, onClick), + onClick: (e: MouseEvent) => handleNavItemClick(e, context, preventDefault), 'aria-current': isActive ? 'page' : null, ...(styleChildren && { className: css(styles.navLink, isActive && styles.modifiers.current, child.props && child.props.className) From 33f7a995b6cf063b9af215ac22b82ca2fbf11677 Mon Sep 17 00:00:00 2001 From: Mohamed Fall Date: Thu, 5 Mar 2026 16:36:10 +0000 Subject: [PATCH 2/3] fix(NavItem): add type to context parameter in handleNavItemClick --- packages/react-core/src/components/Nav/NavItem.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/react-core/src/components/Nav/NavItem.tsx b/packages/react-core/src/components/Nav/NavItem.tsx index 17db1a5ecd5..d1b6ad427ae 100644 --- a/packages/react-core/src/components/Nav/NavItem.tsx +++ b/packages/react-core/src/components/Nav/NavItem.tsx @@ -13,7 +13,7 @@ import styles from '@patternfly/react-styles/css/components/Nav/nav'; import menuStyles from '@patternfly/react-styles/css/components/Menu/menu'; import dividerStyles from '@patternfly/react-styles/css/components/Divider/divider'; import { css } from '@patternfly/react-styles'; -import { NavContext, NavSelectClickHandler } from './Nav'; +import { NavContext, NavContextProps, NavSelectClickHandler } from './Nav'; import { PageSidebarContext } from '../Page/PageSidebar'; import { PageContext } from '../Page/PageContext'; import { useOUIAProps, OUIAProps } from '../../helpers'; @@ -195,7 +195,7 @@ const NavItemBase: React.FunctionComponent = ({ const tabIndex = isSidebarOpen ? null : -1; - const handleNavItemClick = (event: any, context: any, preventLinkDefault: boolean) => { + const handleNavItemClick = (event: any, context: NavContextProps, preventLinkDefault: boolean) => { context.onSelect(event, groupId, itemId, to, preventLinkDefault, onClick); if (isManagedSidebar && isMobile && isSidebarOpen) { @@ -203,7 +203,7 @@ const NavItemBase: React.FunctionComponent = ({ } }; - const renderDefaultLink = (context: any): React.ReactNode => { + const renderDefaultLink = (context: NavContextProps): React.ReactNode => { const preventLinkDefault = preventDefault || !to; return ( = ({ ); }; - const renderClonedChild = (context: any, child: React.ReactElement): React.ReactNode => + const renderClonedChild = (context: NavContextProps, child: React.ReactElement): React.ReactNode => cloneElement(child, { onClick: (e: MouseEvent) => handleNavItemClick(e, context, preventDefault), 'aria-current': isActive ? 'page' : null, From 7c67facc37c052a001ca1d08909d5bdebdfc6dff Mon Sep 17 00:00:00 2001 From: Mohamed Fall Date: Thu, 5 Mar 2026 17:27:22 +0000 Subject: [PATCH 3/3] fix(NavItem): safely call onSelect in handleNavItemClick and adjust sidebar toggle condition --- packages/react-core/src/components/Nav/NavItem.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/react-core/src/components/Nav/NavItem.tsx b/packages/react-core/src/components/Nav/NavItem.tsx index d1b6ad427ae..dd49fc7ee8c 100644 --- a/packages/react-core/src/components/Nav/NavItem.tsx +++ b/packages/react-core/src/components/Nav/NavItem.tsx @@ -196,9 +196,9 @@ const NavItemBase: React.FunctionComponent = ({ const tabIndex = isSidebarOpen ? null : -1; const handleNavItemClick = (event: any, context: NavContextProps, preventLinkDefault: boolean) => { - context.onSelect(event, groupId, itemId, to, preventLinkDefault, onClick); + context.onSelect?.(event, groupId, itemId, to, preventLinkDefault, onClick); - if (isManagedSidebar && isMobile && isSidebarOpen) { + if (isManagedSidebar && isMobile && isSidebarOpen && !hasFlyout) { onSidebarToggle(); } };