diff --git a/packages/react/src/components/OverflowMenu/OverflowMenu-test.js b/packages/react/src/components/OverflowMenu/OverflowMenu-test.js
index 30c140a52d6a..1f77e977574c 100644
--- a/packages/react/src/components/OverflowMenu/OverflowMenu-test.js
+++ b/packages/react/src/components/OverflowMenu/OverflowMenu-test.js
@@ -402,4 +402,29 @@ describe('OverflowMenu', () => {
expect(button).not.toHaveClass('cds--overflow-menu--open');
expect(button).toHaveFocus();
});
+ describe('Ref handling', () => {
+ it('should support both standard ref and innerRef', () => {
+ const standardRef = React.createRef();
+ const innerRef = React.createRef();
+
+ render(
+
+
+
+
+ );
+ const buttonElement = screen.getByRole('button');
+ expect(standardRef.current).not.toBeNull();
+ expect(innerRef.current).not.toBeNull();
+ expect(standardRef.current).toBe(buttonElement);
+ expect(innerRef.current).toBe(buttonElement);
+
+ // Verify both refs point to the same element & not null
+ expect(standardRef.current).toBe(innerRef.current);
+ });
+ });
});
diff --git a/packages/react/src/components/OverflowMenu/OverflowMenu.tsx b/packages/react/src/components/OverflowMenu/OverflowMenu.tsx
index 386cc0cb48db..30561827882b 100644
--- a/packages/react/src/components/OverflowMenu/OverflowMenu.tsx
+++ b/packages/react/src/components/OverflowMenu/OverflowMenu.tsx
@@ -229,7 +229,8 @@ export interface OverflowMenuProps {
size?: 'sm' | 'md' | 'lg';
/**
- * The ref to the HTML element that should receive focus when the OverflowMenu opens
+ * The ref to the overflow menu's trigger button element.
+ * @deprecated Use the standard React `ref` prop instead.
*/
innerRef?: Ref;
}
@@ -258,6 +259,7 @@ export const OverflowMenu = forwardRef(
renderIcon: IconElement = OverflowMenuVertical,
selectorPrimaryFocus = '[data-floating-menu-primary-focus]',
size = 'md',
+ innerRef,
...other
},
ref
@@ -543,6 +545,9 @@ export const OverflowMenu = forwardRef(
})}
);
+ const combinedRef = innerRef
+ ? mergeRefs(triggerRef, innerRef, ref)
+ : mergeRefs(triggerRef, ref);
return (
<>
@@ -559,7 +564,7 @@ export const OverflowMenu = forwardRef(
className={overflowMenuClasses}
onClick={handleClick}
id={id}
- ref={mergeRefs(triggerRef, ref)}
+ ref={combinedRef}
size={size}
label={iconDescription}
kind="ghost">