Fix ref instability by using useMergeRefs

Replace the inline ref callback with useMergeRefs from @wordpress/compose
to prevent unnecessary ref detach/reattach cycles on every render. Add a
regression test verifying forwarded callback refs remain stable across
rerenders.

Author: rushikeshmore

packages/components/src/navigable-container/container.tsx

@@ -7,6 +7,7 @@ import type { ForwardedRef } from 'react';
  * WordPress dependencies
  */
 import { forwardRef, useRef, useEffect, useCallback } from '@wordpress/element';
+import { useMergeRefs } from '@wordpress/compose';
 import { focus } from '@wordpress/dom';
 
 /**
@@ -153,19 +154,10 @@ function UnforwardedNavigableContainer(
 		getFocusableContext,
 	] );
 
+	const mergedRef = useMergeRefs( [ containerRef, ref ] );
+
 	return (
-		<div
-			ref={ ( node ) => {
-				containerRef.current = node;
-
-				if ( typeof ref === 'function' ) {
-					ref( node );
-				} else if ( ref ) {
-					ref.current = node;
-				}
-			} }
-			{ ...restProps }
-		>
+		<div ref={ mergedRef } { ...restProps }>
 			{ children }
 		</div>
 	);

packages/components/src/navigable-container/test/navigable-menu.tsx

@@ -215,6 +215,30 @@ describe( 'NavigableMenu', () => {
 		expect( externalWrapperOnKeyDownSpy ).toHaveBeenCalledTimes( 2 );
 	} );
 
+	it( 'should keep forwarded callback refs stable across rerenders', () => {
+		const refSpy = jest.fn();
+
+		const { rerender } = render(
+			<NavigableMenu ref={ refSpy }>
+				<button>Item 1</button>
+			</NavigableMenu>
+		);
+
+		expect( refSpy ).toHaveBeenCalledTimes( 1 );
+		expect( refSpy ).toHaveBeenCalledWith( expect.any( HTMLElement ) );
+
+		rerender(
+			<NavigableMenu ref={ refSpy }>
+				<button>Item 1</button>
+			</NavigableMenu>
+		);
+
+		// With a stable merged ref (useMergeRefs), the callback ref should
+		// not be called again on rerender. Previously, an inline ref callback
+		// would cause React to detach (null) and reattach on every render.
+		expect( refSpy ).toHaveBeenCalledTimes( 1 );
+	} );
+
 	it( 'skips its internal logic when the tab key is pressed', async () => {
 		const user = userEvent.setup();