From 459aa53bf06806988333208b3635914507312666 Mon Sep 17 00:00:00 2001
From: nicolethoen <nthoen@redhat.com>
Date: Thu, 6 Feb 2025 13:11:34 -0500
Subject: [PATCH] fix(MenuItem): mouse can trigger tooltip on aria-disabled
 items

---
 eslint.config.mjs                             |  1 +
 .../src/components/Menu/MenuItem.tsx          | 57 ++++++++++---------
 2 files changed, 32 insertions(+), 26 deletions(-)

diff --git a/eslint.config.mjs b/eslint.config.mjs
index dce1acb2dcb..49dea9f6ac1 100644
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -16,6 +16,7 @@ export default [
       '**/css',
       'packages/react-core/src/helpers/Popper/thirdparty',
       'packages/react-docs/patternfly-docs/generated',
+      'packages/react-docs/coverage',
       '.history/*',
       'packages/react-docs/static',
       '**/.cache'
diff --git a/packages/react-core/src/components/Menu/MenuItem.tsx b/packages/react-core/src/components/Menu/MenuItem.tsx
index 4e779d42af3..e08211f04b9 100644
--- a/packages/react-core/src/components/Menu/MenuItem.tsx
+++ b/packages/react-core/src/components/Menu/MenuItem.tsx
@@ -147,6 +147,8 @@ const MenuItemBase: React.FunctionComponent<MenuItemProps> = ({
   const flyoutContext = React.useContext(FlyoutContext);
   const [flyoutXDirection, setFlyoutXDirection] = React.useState(flyoutContext.direction);
   const ref = React.useRef<HTMLLIElement>(undefined);
+  const privateRef = React.useRef(undefined);
+  const innerComponentRef = innerRef || privateRef;
   const flyoutVisible = ref === flyoutRef;
 
   const hasFlyout = flyoutMenu !== undefined;
@@ -351,7 +353,7 @@ const MenuItemBase: React.FunctionComponent<MenuItemProps> = ({
             {...(!hasCheckbox && { disabled: isDisabled, 'aria-label': ariaLabel })}
             {...(!hasCheckbox && !flyoutMenu && { role: isSelectMenu ? 'option' : 'menuitem' })}
             {...(!hasCheckbox && !flyoutMenu && isSelectMenu && { 'aria-selected': getIsSelected() })}
-            ref={innerRef}
+            ref={innerComponentRef}
             {...(!hasCheckbox && {
               onClick: (event: React.KeyboardEvent | React.MouseEvent) => {
                 if (!isAriaDisabled) {
@@ -433,31 +435,34 @@ const MenuItemBase: React.FunctionComponent<MenuItemProps> = ({
   );
 
   return (
-    <li
-      className={css(
-        styles.menuListItem,
-        isDisabled && styles.modifiers.disabled,
-        isAriaDisabled && styles.modifiers.ariaDisabled,
-        _isOnPath && styles.modifiers.currentPath,
-        isLoadButton && styles.modifiers.load,
-        isLoading && styles.modifiers.loading,
-        isFocused && 'pf-m-focus',
-        isDanger && styles.modifiers.danger,
-        className
-      )}
-      onMouseOver={() => {
-        if (!isAriaDisabled) {
-          onMouseOver();
-        }
-      }}
-      {...(flyoutMenu && !isAriaDisabled && { onKeyDown: handleFlyout })}
-      ref={ref}
-      role={!hasCheckbox ? 'none' : 'menuitem'}
-      {...(hasCheckbox && { 'aria-label': ariaLabel })}
-      {...props}
-    >
-      {tooltipProps ? <Tooltip {...tooltipProps}>{renderItem}</Tooltip> : renderItem}
-    </li>
+    <>
+      <li
+        className={css(
+          styles.menuListItem,
+          isDisabled && styles.modifiers.disabled,
+          isAriaDisabled && styles.modifiers.ariaDisabled,
+          _isOnPath && styles.modifiers.currentPath,
+          isLoadButton && styles.modifiers.load,
+          isLoading && styles.modifiers.loading,
+          isFocused && 'pf-m-focus',
+          isDanger && styles.modifiers.danger,
+          className
+        )}
+        onMouseOver={() => {
+          if (!isAriaDisabled) {
+            onMouseOver();
+          }
+        }}
+        {...(flyoutMenu && !isAriaDisabled && { onKeyDown: handleFlyout })}
+        ref={ref}
+        role={!hasCheckbox ? 'none' : 'menuitem'}
+        {...(hasCheckbox && { 'aria-label': ariaLabel })}
+        {...props}
+      >
+        {renderItem}
+      </li>
+      {tooltipProps && <Tooltip {...tooltipProps} triggerRef={innerComponentRef as any} />}
+    </>
   );
 };