RAC: <ComboxBox> not working correctly with menuTrigger="focus" and <ListBoxSection>

[francescosac95]

Provide a general summary of the issue here

Hello everyone,
I have been trying to build a ComboBox component with ListSections following your docs and I am unfortunately hitting a wall.
When I use menuTrigger="focus" my field somehow throws an error. It happens in this way:

1. Focus/click on the field
2. Start Typing

      <MyComboBox menuTrigger="focus">
        <ListBoxSection>
          <Header>Fruit</Header>
          <ListBoxItem id="Apple">Apple</ListBoxItem>
          <ListBoxItem id="Banana">Banana</ListBoxItem>
        </ListBoxSection>
      </MyComboBox>

The error I get is the following:
react-aria-components.js?v=be040cb9:923 Uncaught Error: childNodes is not supported

I am currently using react-aria-components: 1.13.0 with react:19.2.0.
Any help would be appreciated.

🤔 Expected Behavior?

The field should work as expected:

1. Focus on field
2. Popover opens
3. User can type without errors

😯 Current Behavior

1: Focus on field
2: Popover opens
3: User types
4. User cannot type anymore and error in console

💁 Possible Solution

No response

🔦 Context

No response

🖥️ Steps to Reproduce

interface MyComboBoxProps<T extends object>
  extends Omit<ComboBoxProps<T>, 'children'> {
  label?: string;
  description?: string | null;
  errorMessage?: string | ((validation: ValidationResult) => string);
  children: React.ReactNode;
}

export function MyComboBox<T extends object>({
  label,
  description,
  errorMessage,
  children,
  ...props
}: MyComboBoxProps<T>) {
  return (
    <ComboBox allowsEmptyCollection {...props} menuTrigger="focus">
      <Label>{label}</Label>
      <div className="my-combobox-container">
        <Input />
        <Button>
          <Icon icon="caretDown" />
        </Button>
      </div>
      {description && <Text slot="description">{description}</Text>}
      <FieldError>{errorMessage}</FieldError>
      <Popover>
        <ListBox>{children}</ListBox>
      </Popover>
    </ComboBox>
  );
}

Version

react-aria-components: 1.13.0

What browsers are you seeing the problem on?

Chrome

If other, please specify.

No response

What operating system are you using?

MacOs

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

[snowystinger]

I cannot reproduce on https://codesandbox.io/p/devbox/objective-lehmann-stjdtv?workspaceId=ws_CrSP6ipvDmgFWioMsdFjKL

Can you provide specific keys I should be typing or make an updated codesandbox which does show the issue?

Thanks!

[francescosac95]

@snowystinger Thanks for the answer.
I see it works with no problems on the codesandbox. Weirdly I still get the error on my side in both storybook and app. A workaround I found is not using and that seems to not trigger the problem.
Unfortunately I am not able to share links because of private work.