use stable composed refs in SlotClone (#3477)

Author: radnan

.changeset/famous-socks-deny.md

@@ -0,0 +1,5 @@
+---
+'@radix-ui/react-slot': patch
+---
+
+use stable composed refs in SlotClone

packages/react/slot/src/slot.test.tsx

@@ -1,5 +1,6 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { cleanup, render, screen, fireEvent } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import { Slot, Slottable } from './slot';
 import { afterEach, describe, it, beforeEach, vi, expect } from 'vitest';
 
@@ -139,6 +140,36 @@ describe('given a Button with Slottable', () => {
   });
 });
 
+describe('given an Input', () => {
+  const handleRef = vi.fn();
+
+  beforeEach(() => {
+    handleRef.mockReset();
+  });
+
+  afterEach(cleanup);
+
+  describe('without asChild', () => {
+    it('should only call function refs once', async () => {
+      render(<Input ref={handleRef} />);
+      await userEvent.type(screen.getByRole('textbox'), 'foo');
+      expect(handleRef).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe('with asChild', () => {
+    it('should only call function refs once', async () => {
+      render(
+        <Input asChild ref={handleRef}>
+          <input />
+        </Input>
+      );
+      await userEvent.type(screen.getByRole('textbox'), 'foo');
+      expect(handleRef).toHaveBeenCalledTimes(1);
+    });
+  });
+});
+
 type TriggerProps = React.ComponentProps<'button'> & { as: React.ElementType };
 
 const Trigger = ({ as: Comp = 'button', ...props }: TriggerProps) => <Comp {...props} />;
@@ -160,3 +191,24 @@ const Button = React.forwardRef<
     </Comp>
   );
 });
+
+const Input = React.forwardRef<
+  React.ElementRef<'input'>,
+  React.ComponentProps<'input'> & {
+    asChild?: boolean;
+  }
+>(({ asChild, children, ...props }, forwardedRef) => {
+  const Comp = asChild ? Slot : 'input';
+  const [value, setValue] = useState('');
+
+  return (
+    <Comp
+      {...props}
+      onChange={(event) => setValue(event.target.value)}
+      ref={forwardedRef}
+      value={value}
+    >
+      {children}
+    </Comp>
+  );
+});

packages/react/slot/src/slot.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { composeRefs } from '@radix-ui/react-compose-refs';
+import { useComposedRefs } from '@radix-ui/react-compose-refs';
 
 /* -------------------------------------------------------------------------------------------------
  * Slot
@@ -66,13 +66,14 @@ interface SlotCloneProps {
 /* @__NO_SIDE_EFFECTS__ */ function createSlotClone(ownerName: string) {
   const SlotClone = React.forwardRef<any, SlotCloneProps>((props, forwardedRef) => {
     const { children, ...slotProps } = props;
+    const childrenRef = React.isValidElement(children) ? getElementRef(children) : undefined;
+    const ref = useComposedRefs(childrenRef, forwardedRef);
 
     if (React.isValidElement(children)) {
-      const childrenRef = getElementRef(children);
       const props = mergeProps(slotProps, children.props as AnyProps);
       // do not pass ref to React.Fragment for React 19 compatibility
       if (children.type !== React.Fragment) {
-        props.ref = forwardedRef ? composeRefs(forwardedRef, childrenRef) : childrenRef;
+        props.ref = ref;
       }
       return React.cloneElement(children, props);
     }