[CommandPalette/InputMenu/SelectMenu] Enable virtualization

[benjamincanac]

• https://reka-ui.com/docs/components/combobox#virtualizer
• https://reka-ui.com/docs/components/listbox#virtualizer

[jwoertink]

Since #3427 was closed, I figure I'll add my comment here, but if this isn't the right spot, let me know.

This seems to have changed between v2 and v3. Here's a small reproducible example:

<template>
  <div>
    <!-- using v2 the menu opens on click
    <USelectMenu
      placeholder="Select Country"
      :options="countriesList"
    /> -->
    <!-- using v3 the menu takes closer to 1500ms to open (with no styling) -->
    <USelectMenu
      placeholder="Select Country"
      :items="countriesList"
    />
  </div>
</template>

<script setup>
  const countriesList = computed(() => {
    return [
    "Afghanistan", "Albania", "Algeria", "Andorra", "Angola", "Antigua and Barbuda", "Argentina", "Armenia", "Australia", "Austria",
    "Azerbaijan", "Bahamas", "Bahrain", "Bangladesh", "Barbados", "Belarus", "Belgium", "Belize", "Benin", "Bhutan",
    "Bolivia", "Bosnia and Herzegovina", "Botswana", "Brazil", "Brunei", "Bulgaria", "Burkina Faso", "Burundi", "Cabo Verde", "Cambodia",
    "Cameroon", "Canada", "Central African Republic", "Chad", "Chile", "China", "Colombia", "Comoros", "Congo (Congo-Brazzaville)", "Costa Rica",
    "Croatia", "Cuba", "Cyprus", "Czechia", "Denmark", "Djibouti", "Dominica", "Dominican Republic", "Ecuador", "Egypt",
    "El Salvador", "Equatorial Guinea", "Eritrea", "Estonia", "Eswatini", "Ethiopia", "Fiji", "Finland", "France", "Gabon",
    "Gambia", "Georgia", "Germany", "Ghana", "Greece", "Grenada", "Guatemala", "Guinea", "Guinea-Bissau", "Guyana",
    "Haiti", "Honduras", "Hungary", "Iceland", "India", "Indonesia", "Iran", "Iraq", "Ireland", "Israel",
    "Italy", "Jamaica", "Japan", "Jordan", "Kazakhstan", "Kenya", "Kiribati", "Kuwait", "Kyrgyzstan", "Laos",
    "Latvia", "Lebanon", "Lesotho", "Liberia", "Libya", "Liechtenstein", "Lithuania", "Luxembourg", "Madagascar", "Malawi",
    "Malaysia", "Maldives", "Mali", "Malta", "Marshall Islands", "Mauritania", "Mauritius", "Mexico", "Micronesia", "Moldova",
    "Monaco", "Mongolia", "Montenegro", "Morocco", "Mozambique", "Myanmar (Burma)", "Namibia", "Nauru", "Nepal", "Netherlands",
    "New Zealand", "Nicaragua", "Niger", "Nigeria", "North Korea", "North Macedonia", "Norway", "Oman", "Pakistan", "Palau",
    "Palestine", "Panama", "Papua New Guinea", "Paraguay", "Peru", "Philippines", "Poland", "Portugal", "Qatar", "Romania",
    "Russia", "Rwanda", "Saint Kitts and Nevis", "Saint Lucia", "Saint Vincent and the Grenadines", "Samoa", "San Marino", "Sao Tome and Principe", "Saudi Arabia", "Senegal",
    "Serbia", "Seychelles", "Sierra Leone", "Singapore", "Slovakia", "Slovenia", "Solomon Islands", "Somalia", "South Africa", "South Korea",
    "South Sudan", "Spain", "Sri Lanka", "Sudan", "Suriname", "Sweden", "Switzerland", "Syria", "Taiwan", "Tajikistan",
    "Tanzania", "Thailand", "Timor-Leste", "Togo", "Tonga", "Trinidad and Tobago", "Tunisia", "Turkey", "Turkmenistan", "Tuvalu",
    "Uganda", "Ukraine", "United Arab Emirates", "United Kingdom", "United States", "Uruguay", "Uzbekistan", "Vanuatu", "Vatican City", "Venezuela",
    "Vietnam", "Yemen", "Zambia", "Zimbabwe"
]
  })
</script>

This can also be seen on the docs page. Clicking the menu takes a moment, then once open, try scrolling up and down the page. The rendering takes a bit of time to catch up with the position. I assumed the opening delay was caused by an API call here, but in my app I have static data and the delay to open takes a bit longer longer.

[Lionad-Morotar]

关于性能问题：其实我疑惑添加虚拟化之后能否提升实际的体验，因为在我的使用场景中，仅 200 条数据就会带来明显的感知延迟，也许除了虚拟化，其他部分仍有优化的空间？
Regarding the performance issue: I’m actually wondering if adding virtualization can truly enhance the overall experience. In my use case, even with just 200 entries, there’s already noticeable perceptible lag. Perhaps there’s room for optimization in areas beyond virtualization as well?