Skip to content

SelectValue with "asChild" and "placeholder" throws Error "Invalid prop style supplied to React.Fragment." #3450

Open
@weiskopfsodefa

Description

@weiskopfsodefa

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.

Image

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

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions