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!

[tomh4]

Hello @reinink , do you perhaps have a link to the issue on headless ui? Or isn't there one ? :)

[reinink]

@tomh4 Hey! Finally got an update here. This week we released @headlessui/react version 2.2.2, which includes performance improvements for the Listbox, Menu, and Combobox components. You can find a summary of these improvements, and read more about them, in our release notes:

https://github.com/tailwindlabs/headlessui/releases/tag/%40headlessui%2Freact%40v2.2.2

To fix this in your Catalyst project, simply update your project to the latest version of Headless UI:

npm install @headlessui/react@latest

Thanks so much for reporting this — this component should work much better for you now 👍

[tomh4]

Thank you for fixing this! Great job :)