Skip to content

Select: description slot throws "Invalid slot" inside a Dialog #2023

Description

@kcacosta

Describe the bug

<Text slot="description"> inside a Select throws when the Select is inside a Dialog:

Error: Invalid slot "description". Valid slot names are "subtitle".

Dialog provides a TextContext whose only slot is subtitle (Dialog.tsx). react-aria's Select does provide its own TextContext with a description slot, but it isn't in scope where the Select's children are first evaluated — RAC renders them once to build the collection, outside that provider — so the Text resolves against the Dialog's context and throws.

TextField in the same position works, which is what makes this look like a Select bug rather than intended Dialog behavior.

To Reproduce

Three cases, run against @launchpad-ui/components 1.19-era RAC in jsdom:

Composition Result
Select + Text slot="description", outside a Dialog works
TextField + Text slot="description", inside a Dialog works
Select + Text slot="description", inside a Dialog throws
render(
  <Dialog aria-label="Example">
    <Select>
      <Label>Organization role</Label>
      <Button>
        <SelectValue />
      </Button>
      <Text slot="description">Provides access to organization settings.</Text>
      <Popover>
        <ListBox items={items}>{(item) => <ListBoxItem id={item.key}>{item.name}</ListBoxItem>}</ListBox>
      </Popover>
    </Select>
  </Dialog>,
);
// Error: Invalid slot "description". Valid slot names are "subtitle".

Moving the Text outside the Select but still inside the Dialog throws the same way.

Expected behavior

A Select in a Dialog should support its description slot, the way TextField already does, so a select-shaped form field in a modal or drawer can carry helper text that is announced as the control's description.

Impact / workaround

Any select field with helper text inside a modal or drawer. The workaround is a plain element wired up by hand:

<Select aria-describedby={helperId}></Select>
<span id={helperId} className={styles.helper}>Provides access to organization settings.</span>

That means restating the description typography in local CSS and losing the slot's aria-describedby wiring. It's now duplicated across two fields in gonfalon's invite-members drawer (OrganizationRoleField, ProjectAccessField) and will spread to every select-with-helper-text field in a dialog until this is fixed.


🤖 Filed by Claude Code on behalf of @kcacosta, from work on gonfalon's invite-members drawer.

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

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