Skip to content

[React Aria] [Browser crashing] Virtualizer1 inside Virtualizer2 #8140

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
kaitoukid-1412 opened this issue Apr 24, 2025 · 4 comments
Open
Labels
needs investigation waiting Waiting on Issue Author

Comments

@kaitoukid-1412
Copy link

Provide a general summary of the issue here

Virtualizer1
Image

Virtualizer2
Image

CodeSandbox
https://codesandbox.io/p/sandbox/c27jpz?file=%2Fsrc%2FApp.js%3A94%2C23

// https://react-spectrum.adobe.com/react-aria/Virtualizer.html

import { useId } from 'react'
import {
  GridLayout,
  ListBox,
  ListBoxItem,
  ListLayout,
  Size,
  Virtualizer as V
} from 'react-aria-components'

const layouts = {
  grid: GridLayout,
  list: ListLayout
}

export const Virtualizer = ({
  children,
  gap,
  items,
  itemSize,
  itemStyle,
  layout
}) => {
  const id = useId()

  return (
    <div style={{ maxWidth: '100%', overflow: 'hidden', resize: 'both' }}>
      <V
        layout={layouts[layout]}
        layoutOptions={{
          gap,
          minItemSize: new Size(itemSize.width, itemSize.height),
          minSpace: new Size(gap, gap)
        }}>
        <ListBox
          aria-labelledby={id}
          className='size-full'
          items={items.map((item, id) => ({ id: id.toString(), ...item }))}
          layout={layout === 'list' ? undefined : layout}
          style={{ overflow: 'auto' }}>
          {item => (
            <ListBoxItem
              style={{ ...itemStyle, ...itemSize }}
              textValue={item.id}>
              {children(item)}
            </ListBoxItem>
          )}
        </ListBox>
      </V>
    </div>
  )
}

🤔 Expected Behavior?

`

😯 Current Behavior

`

💁 Possible Solution

No response

🔦 Context

No response

🖥️ Steps to Reproduce

`

Version

1.8.0

What browsers are you seeing the problem on?

Chrome

If other, please specify.

No response

What operating system are you using?

W11

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

@kaitoukid-1412
Copy link
Author

i forgot add class size-full
https://v3.tailwindcss.com/docs/size

Image

but still have the same error :v

@snowystinger
Copy link
Member

I cannot view the sandbox, I think you need to make it public

@kaitoukid-1412
Copy link
Author

I made it public 😅
https://codesandbox.io/p/sandbox/c27jpz

Image

@yihuiliao
Copy link
Member

Mind expanding what your specific use case is for wanting to nest virtualized components?

@dannify dannify added the waiting Waiting on Issue Author label May 7, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
needs investigation waiting Waiting on Issue Author
Projects
None yet
Development

No branches or pull requests

5 participants