Catalyst UI Dropdown slow with many items

[tomh4]

What component (if applicable)

• URL for category: https://catalyst.tailwindui.com/docs/dropdown
• Component name: Dropdown

Describe the bug
When adding many items (700+) to the dropdown menu, it gets very slow and takes a couple of seconds to open.
Maybe we could make use of a virtualized list or something?

To Reproduce
Steps to reproduce the behavior:

const numberArray = Array.from({ length: 700 }, (_, i) => (i + 1).toString());

<Dropdown>
      <DropdownButton plain>
          <p>Test</p>
        </DropdownButton>
      </div>
      <DropdownMenu>
          {numberArray.map((item) => (
            <DropdownItem key={item}>{item}</DropdownItem>
          ))}
      </DropdownMenu>
    </Dropdown>

Expected behavior
Quick opening of menu, virtualizing the list

Browser/Device (if applicable)

• OS: macOS
• Browser: Chrome

Additional context
It is not uncommon to have these large dropdowns, e.g. our use case is a lanuage picker which has over 700 options to choose from

[reinink]

Hey! Thanks for reporting this. The actual issue isn't in Catalyst, but rather the underlying Headless UI library that we use to power these components. We've been able to reproduce this issue with both the dropdown and listbox components, and the team has already spent some time trying to figure out what's going on here, but unfortunately haven't cracked it yet. Mostly just providing an update here so you know that we're on it. I'll report back once we've learned more 👍

[tomh4]

Ah great to hear!
Thanks for keeping me updated and the great work!