Skip to content
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

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

Open
jami100YT opened this issue Jan 11, 2025 · 0 comments
Labels
enhancement New feature or request triage

Comments

@jami100YT
Copy link

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: `${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(`.${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

@jami100YT jami100YT added enhancement New feature or request triage labels Jan 11, 2025
@jami100YT jami100YT changed the title Add Infinity Scrolling Support to USelectMenu for Handling Large Datasets Add Infinity Scrolling Support to USelectMenu and much more components for Handling Large Datasets Jan 11, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request triage
Projects
None yet
Development

No branches or pull requests

1 participant