Skip to content

TreeItem does not include DEFAULT_SLOT in CheckboxContext, causing Checkbox crash when rendered inside modals/portals #10204

@Netceer

Description

@Netceer

Provide a general summary of the issue here

TreeItem sets CheckboxContext with only { slots: { selection: checkboxProps } }, omitting [DEFAULT_SLOT]: {}. GridListItem and TableRow both include [DEFAULT_SLOT]: {} alongside selection, which allows unslotted Checkbox components to render normally. TreeItem is missing this entry.

🤔 Expected Behavior?

A Checkbox without a slot prop rendered anywhere in the React subtree of a TreeItem (including inside a portalled Modal or Dialog) should render normally, consistent with how GridListItem and TableRow behave.

😯 Current Behavior

Any Checkbox without slot="selection" that is a React descendant of a TreeItem — even if portalled outside the DOM tree — throws: A slot prop is required. Valid slot names are "selection".

💁 Possible Solution

Add [DEFAULT_SLOT]: {} to the CheckboxContext slots provided by TreeItem, matching the pattern used by GridListItem and TableRow:

[CheckboxContext, {
  slots: {
    [DEFAULT_SLOT]: {},       // ← add this
    selection: checkboxProps
  }
}]

🔦 Context

We have a Tree where each TreeItem contains a DialogTrigger that opens a ComponentModal. The modal is portalled outside the DOM tree but remains inside the React component tree. The modal contains a form with a Checkbox (unrelated to tree selection). This crashes because TreeItem's CheckboxContext has no DEFAULT_SLOT entry.

Workaround: manually reset CheckboxContext at the modal boundary:

<CheckboxContext.Provider value={null}>
  <MyModal />
</CheckboxContext.Provider>

🖥️ Steps to Reproduce

Render a Tree with selectionMode="multiple"
Inside a TreeItem, render a DialogTrigger that opens a Modal/Dialog
Inside the dialog, render a Checkbox without a slot prop
Open the dialog → crash: A slot prop is required. Valid slot names are "selection".

<Tree
        aria-label="repro"
        selectionMode="multiple"
        items={[{ id: '1', textValue: 'Item' }]}
      >
        {(item) => (
          <TreeItem textValue={item.textValue}>
            <TreeItemContent>
              <span>{item.textValue}</span>
              <Checkbox>Form checkbox (should not crash)</Checkbox>
            </TreeItemContent>
          </TreeItem>
        )}
      </Tree>

Version

react-aria: 3.49.0, react-aria-components: 1.18.0

What browsers are you seeing the problem on?

Chrome

If other, please specify.

No response

What operating system are you using?

macOS Tahoe 26.3.1

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

Metadata

Metadata

Assignees

No one assigned

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions