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

Virtualize QueryList items #2632

Open
frabarz opened this issue Jun 28, 2018 · 9 comments
Open

Virtualize QueryList items #2632

frabarz opened this issue Jun 28, 2018 · 9 comments

Comments

@frabarz
Copy link

frabarz commented Jun 28, 2018

Environment

  • Package version(s): core@1.35.7 / labs@0.14.4
  • Browser and OS versions: Opera 53, Manjaro Linux XFCE

Feature request

It would be great to have the Select list elements, or the QueryList for that matter, be virtualized to let it handle very long lists.

Examples

I wanted to use Select to handle a list with ~1400 elements, with just a span inside, and as it renders all the items the list takes a good while to appear and filter. I ended up piecing something with react-tiny-virtual-list and Popover2, but without a bunch of the capabilities of Select.

@giladgray
Copy link
Contributor

giladgray commented Jun 28, 2018

@frabarz this is precisely what itemListRenderer is for. we don't want to add a dep on a virtualized library so we added a hook for you to do it yourself!

@giladgray
Copy link
Contributor

Oh also you'll need to be on 2.x or ideally 3.0 for this

@cmslewis
Copy link
Contributor

cmslewis commented Mar 4, 2019

@adidahiya Thoughts on re-opening this? Using a custom itemListRenderer is actually non-trivial or impossible with the new "Create item" option. We may just need to improve the support story there, but I also think it's reasonable for the Select components to handle rendering virtualization internally.

@adidahiya
Copy link
Contributor

Might consider https://github.com/clauderic/react-tiny-virtual-list for this

@gianpaj
Copy link
Contributor

gianpaj commented Apr 28, 2019

I agree this not being trivial. I'm having issues using react-tiny-virtual-list. Could anybody provide an example or help me figure this out?:

https://codesandbox.io/s/p3j721n57m

Screenshot 2019-04-28 at 23 09 10

I believe it's something to do with the style parameter of renderItem from VirtualList.

  renderSelectList = ({
    items,
    itemsParentRef, // do i need this??
    renderItem,
  }: {
    items: Films.IFilm[],
    itemsParentRef: (ref: HTMLElement | null) => void,
    renderItem: (item: any, index: number) => JSX.Element | null,
  }) => {
    return (
      <VirtualList
        width="100%"
        height={400}
        itemCount={items.length}
        itemSize={20} // Also supports variable heights (array or function getter)
        renderItem={({ index, style }) => renderItem(items[index], index)}
      />
    );
  };

@cmslewis
Copy link
Contributor

cmslewis commented May 2, 2019

@gianpaj Would a list-style: none CSS rule come to the rescue here? The menu items look okay but for the erroneous bullets. Having not used react-tiny-virtual-list myself before, I'm not sure which selector would need that rule, but hopefully some quick DOM spelunking can help identify the right element.

@gianpaj
Copy link
Contributor

gianpaj commented May 9, 2019

Hi @cmslewis , thanks for that but actually the CSS is not the only issue.
The biggest issue is that the rest of the items are not appearing on the screen as I believe their position is not being updated when you're scrolling.
i.e. after 79. A Clockwork Orange, more films should appear.

Check the example: https://codesandbox.io/s/p3j721n57m
and gif:
May-09-2019 23-06-12

That's my guess anyway

@saruman1234
Copy link

saruman1234 commented Oct 10, 2019

I believe it's something to do with the style parameter of renderItem from VirtualList.

  renderSelectList = ({
    items,
    itemsParentRef, // do i need this??
    renderItem,
  }: {
    items: Films.IFilm[],
    itemsParentRef: (ref: HTMLElement | null) => void,
    renderItem: (item: any, index: number) => JSX.Element | null,
  }) => {
    return (
      <VirtualList
        width="100%"
        height={400}
        itemCount={items.length}
        itemSize={20} // Also supports variable heights (array or function getter)
        renderItem={({ index, style }) => renderItem(items[index], index)}
      />
    );
  };

I think you're right, as I'm having a similar problem with a different virtualized list library.

Many of the virtualized/window libraries work by setting absolute positions on the elements in the list as you scroll. (This blank list effect is a very common scenario)

Because the renderItem(..) method does not accept them, we cannot pass the style props through to the <MenuItem/> component being rendered.


I've got something working here, but the styling is a bit off.
https://codesandbox.io/s/wandering-meadow-7szg0

@Reggino
Copy link

Reggino commented Apr 14, 2020

@saruman1234 That helped a lot. Thanks for sharing.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

7 participants