diff --git a/packages/react-core/src/components/Nav/examples/NavDrilldown.tsx b/packages/react-core/src/components/Nav/examples/NavDrilldown.tsx index 8ccda91c785..9dc95ae9608 100644 --- a/packages/react-core/src/components/Nav/examples/NavDrilldown.tsx +++ b/packages/react-core/src/components/Nav/examples/NavDrilldown.tsx @@ -49,7 +49,7 @@ export const NavigationDrilldown: React.FunctionComponent = () => { const [menuDrilledIn, setMenuDrilledIn] = React.useState([]); const [drilldownPath, setDrilldownPath] = React.useState([]); const [menuHeights, setMenuHeights] = React.useState({}); - const [activeMenu, setActiveMenu] = React.useState('rootMenu'); + const [activeMenu, setActiveMenu] = React.useState('nav-drilldown-rootMenu'); const onDrillIn = ( _event: React.KeyboardEvent | React.MouseEvent, @@ -57,20 +57,23 @@ export const NavigationDrilldown: React.FunctionComponent = () => { toItemId: string, itemId: string ) => { - setMenuDrilledIn(prevMenuDrilledIn => [...prevMenuDrilledIn, fromItemId]); - setDrilldownPath(prevDrilldownPath => [...prevDrilldownPath, itemId]); + setMenuDrilledIn((prevMenuDrilledIn) => [...prevMenuDrilledIn, fromItemId]); + setDrilldownPath((prevDrilldownPath) => [...prevDrilldownPath, itemId]); setActiveMenu(toItemId); }; const onDrillOut = (_event: React.KeyboardEvent | React.MouseEvent, toItemId: string, _itemId: string) => { - setMenuDrilledIn(prevMenuDrilledIn => prevMenuDrilledIn.slice(0, prevMenuDrilledIn.length - 1)); - setDrilldownPath(prevDrilldownPath => prevDrilldownPath.slice(0, prevDrilldownPath.length - 1)); + setMenuDrilledIn((prevMenuDrilledIn) => prevMenuDrilledIn.slice(0, prevMenuDrilledIn.length - 1)); + setDrilldownPath((prevDrilldownPath) => prevDrilldownPath.slice(0, prevDrilldownPath.length - 1)); setActiveMenu(toItemId); }; const onGetMenuHeight = (menuId: string, height: number) => { - if (!menuHeights[menuId] && menuId !== 'rootMenu') { - setMenuHeights(prevMenuHeights => ({ ...prevMenuHeights, [menuId]: height })); + if ( + (menuHeights[menuId] !== height && menuId !== 'nav-drilldown-rootMenu') || + (!menuHeights[menuId] && menuId === 'nav-drilldown-rootMenu') + ) { + setMenuHeights((prevMenuHeights) => ({ ...prevMenuHeights, [menuId]: height })); } }; @@ -86,7 +89,7 @@ export const NavigationDrilldown: React.FunctionComponent = () => { onDrillOut={onDrillOut} onGetMenuHeight={onGetMenuHeight} > - + Item 1 diff --git a/packages/react-core/src/demos/examples/Nav/NavDrilldown.tsx b/packages/react-core/src/demos/examples/Nav/NavDrilldown.tsx index 3731e50129b..edd52c58bb5 100644 --- a/packages/react-core/src/demos/examples/Nav/NavDrilldown.tsx +++ b/packages/react-core/src/demos/examples/Nav/NavDrilldown.tsx @@ -89,7 +89,7 @@ export const NavDrilldown: React.FunctionComponent = () => { }; const onGetMenuHeight = (menuId: string, height: number) => { - if (!menuHeights[menuId] && menuId !== 'rootMenu') { + if ((menuHeights[menuId] !== height && menuId !== 'rootMenu') || (!menuHeights[menuId] && menuId === 'rootMenu')) { setMenuHeights((prevMenuHeights) => ({ ...prevMenuHeights, [menuId]: height })); } }; diff --git a/packages/react-integration/demo-app-ts/package.json b/packages/react-integration/demo-app-ts/package.json index 0803747d73c..2c39c7a34ff 100644 --- a/packages/react-integration/demo-app-ts/package.json +++ b/packages/react-integration/demo-app-ts/package.json @@ -9,7 +9,7 @@ "serve:demo-app": "node scripts/serve" }, "dependencies": { - "@patternfly/react-core": "^5.0.0-prerelease.2", + "@patternfly/react-core": "^5.0.0-prerelease.3", "react": "^18", "react-dom": "^18", "react-router": "^5.3.3",