diff --git a/packages/react-core/src/components/Menu/MenuItem.tsx b/packages/react-core/src/components/Menu/MenuItem.tsx index 6791897b237..89d0ec420c3 100644 --- a/packages/react-core/src/components/Menu/MenuItem.tsx +++ b/packages/react-core/src/components/Menu/MenuItem.tsx @@ -309,6 +309,23 @@ const MenuItemBase: React.FunctionComponent = ({ setFlyoutRef(null); } }; + + React.useEffect(() => { + if (isFocused && ref.current) { + const itemEl = ref.current; + const parentListEl = itemEl.parentElement; + + if (parentListEl) { + const isAboveTop = itemEl.offsetTop - parentListEl.offsetTop < parentListEl.scrollTop; + const isBelowBottom = itemEl.offsetTop - parentListEl.offsetTop + itemEl.clientHeight; + + if (isAboveTop || isBelowBottom) { + itemEl.scrollIntoView({ behavior: 'smooth', block: 'nearest' }); + } + } + } + }, [isFocused]); + const isSelectMenu = menuRole === 'listbox'; const renderItem = ( @@ -428,13 +445,7 @@ const MenuItemBase: React.FunctionComponent = ({ {...(hasCheckbox && { 'aria-label': ariaLabel })} {...props} > - {tooltipProps ? ( - - {renderItem} - - ) : ( - renderItem - )} + {tooltipProps ? {renderItem} : renderItem} ); };