fix(Menu): focused items should scrollintoview when overflowed

patternfly · Jul 26, 2023 · a9848b5 · a9848b5
1 parent 0d5ec4f
commit a9848b5
Showing 1 changed file with 18 additions and 7 deletions.
diff --git 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<MenuItemProps> = ({
       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<MenuItemProps> = ({
       {...(hasCheckbox && { 'aria-label': ariaLabel })}
       {...props}
     >
-      {tooltipProps ? (
-        <Tooltip {...tooltipProps}>
-          {renderItem}
-        </Tooltip>
-      ) : (
-        renderItem
-      )}
+      {tooltipProps ? <Tooltip {...tooltipProps}>{renderItem}</Tooltip> : renderItem}
     </li>
   );
 };