fix: adds backward compatibility for innerRefs (#19086)

Author: 2nikhiltom

packages/react/src/components/OverflowMenu/OverflowMenu-test.js

@@ -413,4 +413,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(
+        <OverflowMenu
+          ref={standardRef}
+          innerRef={innerRef}
+          aria-label="Overflow menu"
+          data-testid="overflow-menu">
+          <OverflowMenuItem itemText="Option 1" />
+          <OverflowMenuItem itemText="Option 2" />
+        </OverflowMenu>
+      );
+      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);
+    });
+  });
 });

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<any>;
 }
@@ -258,6 +259,7 @@ export const OverflowMenu = forwardRef<HTMLButtonElement, OverflowMenuProps>(
       renderIcon: IconElement = OverflowMenuVertical,
       selectorPrimaryFocus = '[data-floating-menu-primary-focus]',
       size = 'md',
+      innerRef,
       ...other
     },
     ref
@@ -543,6 +545,9 @@ export const OverflowMenu = forwardRef<HTMLButtonElement, OverflowMenuProps>(
         })}
       </FloatingMenu>
     );
+    const combinedRef = innerRef
+      ? mergeRefs(triggerRef, innerRef, ref)
+      : mergeRefs(triggerRef, ref);
 
     return (
       <>
@@ -559,7 +564,7 @@ export const OverflowMenu = forwardRef<HTMLButtonElement, OverflowMenuProps>(
             className={overflowMenuClasses}
             onClick={handleClick}
             id={id}
-            ref={mergeRefs(triggerRef, ref)}
+            ref={combinedRef}
             size={size}
             label={iconDescription}
             kind="ghost">