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">