Skip to content

asChild not respected for <Select.Item> on web #58

@bryanmylee

Description

@bryanmylee

On web, <Select.Item asChild> does nothing.

Why are we not passing asChild through on the Select.Item component for select.web? I just spent 30 minutes trying to figure out why Radix wasn't forwarding <Select.Item> to my custom <Button> component, only to see in the source code for @rn-primitives/packages/select/src/select.web.tsx:

const Item = React.forwardRef<ItemRef, ItemProps>(
  ({ asChild, closeOnPress = true, label, value, children, ...props }, ref) => {
    const { labelForValueRef } = useRootContext();
    labelForValueRef.current[value] = label;
    return (
      <ItemContext.Provider value={{ itemValue: value, label: label }}>
        <Slot.Pressable ref={ref} {...props}>
          <Select.Item textValue={label} value={value} disabled={props.disabled ?? undefined}>
            <>{children as React.ReactNode}</>
          </Select.Item>
        </Slot.Pressable>
      </ItemContext.Provider>
    );
  }
);

Is there a reason why we're passing <>{children}</> as children and not forwarding asChild? If this is an oversight, I'm happy to open another PR for it.

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