ComboBox with ListBox.Section throws "childNodes is not supported" when typing (v3 beta)

HeroUI Version

3.0.0-beta.6

Describe the bug

ComboBox with ListBox.Section throws "childNodes is not supported" when typing (v3 beta)

Summary

When using a ComboBox with ListBox.Section (grouped options), typing in the input intermittently triggers a runtime error "childNodes is not supported". After the error, the input stops accepting keystrokes. The error comes from @react-aria/collections and appears to be a mismatch between collection implementations used by the ComboBox (sections) and the Node type.

Environment

• @heroui/react: 3.0.0-beta.6
• Next.js: 16.1.6 (Turbopack)
• React: 19.2.3
• react-dom: 19.2.3

Expected behavior

• User can type in the ComboBox to filter or enter a custom value without any runtime error.
• Input remains responsive.

Actual behavior

• Runtime error: childNodes is not supported
• After the error, the input no longer accepts keystrokes (component is broken for that instance).

Error details

• Type: Runtime error
• Message: childNodes is not supported
• Origin: Thrown from @react-aria/collections in BaseCollection.ts (or equivalent), in the CollectionNode getter for childNodes (which intentionally throws).

Likely cause

Tracing the stack:

1. @react-aria/combobox (useComboBox.ts) builds a focus announcement and calls
   getChildNodes(section, state.collection)
   to get the section’s child count (e.g. around line 301: groupCount: section ? [...getChildNodes(section, state.collection)].length : 0).

2. @react-stately/collections getChildNodes(node, collection) is implemented as:

   • If collection.getChildren exists → use collection.getChildren(node.key).
   • Otherwise → use node.childNodes (legacy path).

3. @react-aria/collections CollectionNode defines a childNodes getter that always throws:
   throw new Error('childNodes is not supported');
   (Nodes are intended to be used only via collection.getChildren(key).)

So when the ComboBox’s collection in that code path does not expose getChildren, getChildNodes falls back to node.childNodes, and the call throws. That would indicate a mismatch between the collection implementation (e.g. from listbox/combobox state) and the Node type from @react-aria/collections.

Workaround

Until fixed, using a flat list avoids the failing path: render a single ListBox with only ListBox.Item children (no ListBox.Section). Section headers can be simulated with disabled ListBox.Items. With a flat list, the section-based getChildNodes(section, state.collection) branch is not used and the error does not occur.

Additional context

• Reproduced on Next.js 16.1.6 with Turbopack.
• ComboBox is used in a form with controlled selectedKey and inputValue (and onInputChange / onSelectionChange), but the same minimal reproduction above is uncontrolled and still triggers the issue.
• This is specific to ComboBox + ListBox.Section; the same ListBox structure in a plain Select (or without sections) does not trigger this error in our usage.

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

Steps to reproduce

1. Create a ComboBox with sections using ListBox.Section and Header (and optionally Separator between sections).
2. Use allowsCustomValue so the user can type freely.
3. Focus the ComboBox input and start typing (either to filter or to enter a custom value).
4. After some typing (often within a few characters), the error is thrown and the input becomes unresponsive.

Minimal reproduction (JSX)

"use client";

import { ComboBox, Header, Input, Label, ListBox, Separator } from "@heroui/react";

export function Reproduce() {
  return (
    <ComboBox allowsCustomValue className="w-[280px]">
      <Label>Ingredient</Label>
      <ComboBox.InputGroup>
        <Input placeholder="Search or type..." />
        <ComboBox.Trigger />
      </ComboBox.InputGroup>
      <ComboBox.Popover>
        <ListBox>
          <ListBox.Section>
            <Header>Flour</Header>
            <ListBox.Item id="wheat" textValue="Wheat flour">
              Wheat flour
              <ListBox.ItemIndicator />
            </ListBox.Item>
            <ListBox.Item id="rye" textValue="Rye flour">
              Rye flour
              <ListBox.ItemIndicator />
            </ListBox.Item>
          </ListBox.Section>
          <Separator />
          <ListBox.Section>
            <Header>Other</Header>
            <ListBox.Item id="salt" textValue="Salt">
              Salt
              <ListBox.ItemIndicator />
            </ListBox.Item>
          </ListBox.Section>
        </ListBox>
      </ComboBox.Popover>
    </ComboBox>
  );
}

• Focus the input and type a few characters (e.g. "w" or "sa"). The error may appear after one or more keystrokes.
• Without sections (flat ListBox with only ListBox.Item children), the error does not occur.

Expected behavior

No crash and constantly allowing input

Screenshots or Videos

No response

Operating System Version

Next.js 16.1.6, Mac, Node 24

Browser

Chrome