adobe / adobe/react-spectrum

Combobox with sections throwing error 'Uncaught Error: childNodes is not supported'

Open
#9,405 12 comments 6 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
15.9k
Forks
1.6k
Avg merge
3d 9m
Merged PRs (30d)
59

Description

### Provide a general summary of the issue here

Hello everyone,

I once have already reported this bug but we thought it was due to duplicated versions of the library in my env. I was able to reproduce in a sandbox so here is the bug report.

When I click the button in the combobox and I have dynamic sections (uncontrolled), as soon as I start searching, the field stops working and It throws a console error:
'Uncaught Error: childNodes is not supported' .

### 🤔 Expected Behavior?

The field should should not throw an error and should allow to filter the list.

### 😯 Current Behavior

The field stops working and throws an error.

### 💁 Possible Solution

_No response_

### 🔦 Context

The issue is currently affecting us. We are building our new design system and a grouped combobox is currently needed.

### 🖥️ Steps to Reproduce

https://codesandbox.io/p/devbox/nifty-violet-vr6pgf

Here you can find a minimal example of the problem.

1: Click on the button
2: Type a letter (I always do it with T and I am able to reproduce always)
3: Field is unresponsive

Better reproduce the steps relatively fast.

### Version

using react aria components 1.13.0 in work environment but sandbox uses 1.14.0 and the bug is there

### What browsers are you seeing the problem on?

Chrome

### If other, please specify.

_No response_

### What operating system are you using?

OS

### 🧢 Your Company/Team

_No response_

### 🕷 Tracking Issue

_No response_

Contributor guide

Open the contributing guide

Research direction

Start by running the linked CodeSandbox with React Aria Components 1.14.0, following the three reproduction steps for a combobox with dynamic sections. Inspect the combobox behavior when searching after opening it, and confirm the fix by ensuring Chrome does not report the childNodes error and the grouped list remains filterable.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.