Open
Description
Bug report
Provide a SelectValue like this:
<SelectValue
asChild
placeholder="Select a Folder"
>
<div>{customvalue}</div>
</SelectValue>
Current Behavior
Throws Error Invalid prop style
supplied to React.Fragment
.

Expected behavior
Should not throw this Error
Suggested solution
Current code:
<Primitive.span
{...valueProps}
ref={composedRefs}
// we don't want events from the portalled `SelectValue` children to bubble
// through the item they came from
style={{ pointerEvents: 'none' }}
>
{shouldShowPlaceholder(context.value) ? <>{placeholder}</> : children}
</Primitive.span>
My guess is the asChild applies the style style={{ pointerEvents: 'none' }}
to the Fragment of <>{placeholder}</>
Should be possible to just be {placeholder}
instead so you can solve it yourself by providing a proper ReactNode as placeholder.
Additional context
Your environment
NextJS 15
React 19
"@radix-ui/react-select": "2.1.6",
Software | Name(s) | Version |
---|---|---|
Radix Package(s) | @radix-ui/react-select | 2.1.6 |
React | 19 | |
Browser | chrome | |
Assistive tech | ||
Node | 20 | |
npm/yarn/pnpm | pnpm 9 | |
Operating System | macos |
Metadata
Metadata
Assignees
Labels
No labels