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.
Describe the bug
<Text slot="description">inside aSelectthrows when theSelectis inside aDialog:Dialogprovides aTextContextwhose only slot issubtitle(Dialog.tsx). react-aria'sSelectdoes provide its ownTextContextwith adescriptionslot, but it isn't in scope where theSelect's children are first evaluated — RAC renders them once to build the collection, outside that provider — so theTextresolves against theDialog's context and throws.TextFieldin the same position works, which is what makes this look like aSelectbug rather than intendedDialogbehavior.To Reproduce
Three cases, run against
@launchpad-ui/components1.19-era RAC in jsdom:Select+Text slot="description", outside aDialogTextField+Text slot="description", inside aDialogSelect+Text slot="description", inside aDialogMoving the
Textoutside theSelectbut still inside theDialogthrows the same way.Expected behavior
A
Selectin aDialogshould support itsdescriptionslot, the wayTextFieldalready 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:
That means restating the description typography in local CSS and losing the slot's
aria-describedbywiring. 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.