search

adobe / react-spectrum

A collection of libraries and tools that help you build adaptive, accessible, and robust user experiences.
https://react-spectrum.adobe.com
Apache License 2.0
13.04k stars 1.13k forks source link

Nesting React Aria ListBox consumes memory and crashes browser #7119

Closed lecstor closed 1 month ago

lecstor commented 1 month ago

Provide a general summary of the issue here

Nesting ListBox from react-aria-components sends the browser into a spin running cpu at 100% and incrementally consuming more memory until the browser crashes. Tested in Chrome, Firefox, and Safari.

<ListBox>
  <ListBoxItem>
    <ListBox>
      <ListBoxItem>Hello</ListBoxItem>
    </ListBox>
  </ListBoxItem>
</ListBox>

🤔 Expected Behavior?

Ideally the ListBoxes render and work as expected. If that isn't possible then it probably needs to throw an error.

😯 Current Behavior

The browser appears to freeze up with cpu at 100% and incrementally more memory consumed until the browser crashes.

💁 Possible Solution

Sorry, no clue.

🔦 Context

I was using ListBoxes as the drop target for a visual web editor where each node is a component and each component that can take children utilises a listbox to accept child components.

🖥️ Steps to Reproduce

https://codesandbox.io/p/sandbox/goofy-sky-c2sygk

Version

react-aria-components: ^1.3.3

What browsers are you seeing the problem on?

Firefox, Chrome, Safari

If other, please specify.

No response

What operating system are you using?

MacOS

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

reidbarber commented 1 month ago

The Listbox pattern support having interactive elements inside items (see ARIA APG). You could try using a GridList instead.