Skip to content

Revert Slot changes causing RSC errors #3554

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
May 19, 2025
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/twenty-apples-stay.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@radix-ui/react-slot': patch
---

Revert slot changes causing errors in server components
1 change: 0 additions & 1 deletion packages/react/slot/src/index.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
'use client';
export {
Slot,
Slottable,
Expand Down
8 changes: 5 additions & 3 deletions packages/react/slot/src/slot.test.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { useState } from 'react';
import * as React from 'react';
import { cleanup, render, screen, fireEvent } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { Slot, Slottable } from './slot';
Expand Down Expand Up @@ -140,7 +140,9 @@ describe('given a Button with Slottable', () => {
});
});

describe('given an Input', () => {
// TODO: Unskip when underlying issue is resolved
// Reverted in https://github.com/radix-ui/primitives/pull/3554
describe.skip('given an Input', () => {
const handleRef = vi.fn();

beforeEach(() => {
Expand Down Expand Up @@ -199,7 +201,7 @@ const Input = React.forwardRef<
}
>(({ asChild, children, ...props }, forwardedRef) => {
const Comp = asChild ? Slot : 'input';
const [value, setValue] = useState('');
const [value, setValue] = React.useState('');

return (
<Comp
Expand Down
7 changes: 3 additions & 4 deletions packages/react/slot/src/slot.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import * as React from 'react';
import { useComposedRefs } from '@radix-ui/react-compose-refs';
import { composeRefs } from '@radix-ui/react-compose-refs';

/* -------------------------------------------------------------------------------------------------
* Slot
Expand Down Expand Up @@ -66,14 +66,13 @@ 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 = ref;
props.ref = forwardedRef ? composeRefs(forwardedRef, childrenRef) : childrenRef;
}
return React.cloneElement(children, props);
}
Expand Down