feat: add functionality for enabling Virtualized Listbox

[Ogglas]

🙋 Feature Request

I originally opened an issue for Virtualize Listbox in fluentui-blazor here: https://github.com/microsoft/fluentui-blazor/issues/460#issuecomment-1679057885.

Virtualization works really well for Data grid with large data sets in fluentui-blazor. Given that Listbox can sometimes contain large data sets I think it would be really good here as well. For fluentui-blazor this could also mean that Search with debounce would only be needed for API calls.

https://www.fluentui-blazor.net/Search#interactive-with-debounce

Could be an alternative for this fix in fluentui-blazor:

https://github.com/microsoft/fluentui-blazor/issues/389

This could however not be done in fluentui-blazor since “we cannot interject into the rendering of the listbox”. Is it possible to add this functionality?

[chrisdholt]

Thanks for this issue @ogglas, FWIW, I do agree that thousands of items in a listbox would be quite a lot to navigate through :). With regard to virtualization, I think my personal preference to start would be to look and see if a directive could help solve this. A directive for virtualization would essentially allow it to port anywhere and to any component necessary (whether FAST foundation or something unrelated). I'm hesitant to duplicate the virtualization logic in each potential component because it kind of hoists the requirement to all implementors.

@vnbaaij Are you able to use directives in the Blazor implementation?

[vnbaaij]

@chrisdholt not sure. If you have a stackblitz with an example of how that would look with Javascript, I can take a look on how/if I can translate it to Blazor

[chrisdholt]

@chrisdholt not sure. If you have a stackblitz with an example of how that would look with Javascript, I can take a look on how/if I can translate it to Blazor

I don't have one but it would be akin to using repeat() or when() as examples of other directives.

[vnbaaij]

No experience with both of those either...

[Ogglas]

@chrisdholt @vnbaaij Any way forward on this?

[vnbaaij]

Not from my side...

[codeaphex]

So, I landed here from the FluentUI Blazor repo and am a bit confused. I see you are against using hundreds or thousands of items in a ListBox, this maybe somehow understandable, but what is the correct solution to be used for endless feeds like we have in many social or newsfeed apps? The ListBox seems to be an implementation of https://www.w3.org/WAI/ARIA/apg/patterns/listbox/, what I probably need is an implementation of the feed pattern https://www.w3.org/WAI/ARIA/apg/patterns/feed/. Example: https://www.w3.org/WAI/ARIA/apg/patterns/feed/examples/feed-display.html Is there anything you can recommend for this pattern?

fyi: The link in the ListBox docs points to https://www.w3.org/TR/wai-aria-practices-1.2/#Listbox which is outdated.

[janechu]

Looks like this issue should be filed with Fluent UI.

[Ogglas]

@janechu Not according to this issue comment?

[janechu]

@ogglas sorry I should have been more clear, we are deprecated the @microsoft/fast-foundation package per #6955, also fluentui-blazor will be taking a dependency on Fluent UI instead of @microsoft/fast-foundation (still web components, still built on FAST but in the Fluent UI repository).

This issue should be filed with Fluent UI, unless we want to add a new directive for virtualization to @microsoft/fast-element, @chrisdholt what are your thoughts?