Add Infinity Scrolling Support to USelectMenu and much more components for Handling Large Datasets

[jami100YT]

Description

I would like to propose adding native Infinity Scrolling support to the USelectMenu component and much more for efficiently handling and displaying large datasets.

Currently, I have implemented a workaround by using a combination of a MutationObserver and dynamic class binding to detect when the dropdown menu is rendered. Once the menu is detected, I attach an onScroll event listener to implement custom infinity scrolling. Below is an example of how this has been achieved:

<template>
    <USelectMenu :ui-menu="{ strategy: 'merge', base: `scroller-${randomHash}` }" />
</template>

<script setup lang="ts">
const randomHash = Math.random().toString(36).substring(7);

onMounted(() => {
  const observer = new MutationObserver((mutationsList) => {
    for (const mutation of mutationsList) {
      if (mutation.type === "childList") {
        const element = document.querySelector(`.scroller-${randomHash}`);
        if (element) {
          // Element has been found, add an onScroll event listener
          observer.disconnect();
          break;
        }
      }
    }
  });

  observer.observe(document.body, {
    childList: true,
    subtree: true,  
  });

  onBeforeUnmount(() => {
    observer.disconnect();
  });
});
<script/>

Additional context

No response

[DeekHalden]

+1 up

[benjamincanac]

This will be implemented in v3 at some point, see #2336.