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>
  );
 };