Description
Component
Accordion
Package version
9.66.3
React version
18.3.1
Environment
System:
OS: Linux 5.15 Ubuntu 22.04.5 LTS 22.04.5 LTS (Jammy Jellyfish)
CPU: (6) x64 unknown
Memory: 4.64 GB / 7.67 GB
Container: Yes
Shell: 5.1.16 - /bin/bash
npmPackages:
@fluentui/react: ^8.112.9 => 8.122.19
@fluentui/react-components: ^9.66.3 => 9.66.3
react: ^18.2.0 => 18.3.1
react-dom: ^18.2.0 => 18.3.1Current Behavior
The current behavior is that when using the Fluent UI Virtualizer in a dropdown/select component with a very large number of options (e.g., 1000), the application throws a runtime error:
This error occurs because an internal ref (containerSizeRef.current) is undefined when the virtualizer tries to access it. As a result, the dropdown either fails to render properly or crashes, preventing users from scrolling through and selecting options from the full list. This issue persists even when the ref is attached via the listbox prop and all recommended ref-guarding patterns are followed.
Expected Behavior
The expected behavior is that the dropdown/select component should allow smooth scrolling and selection through all 1000 options without any errors or crashes. The Fluent UI Virtualizer should efficiently render only the visible items plus a buffer, while maintaining a functional scroll bar and seamless user experience. There should be no runtime errors related to undefined refs, and the dropdown should remain fully interactive regardless of the dataset size.
Reproduction
need reproduction
Steps to reproduce
To reproduce the issue:
Render the dropdown/select component that uses Fluent UI Virtualizer with a very large options array (e.g., 1000 items).
Open the dropdown so that the virtualizer attempts to render the list.
Try to scroll through the dropdown or interact with the list.
Result:
As soon as the dropdown is opened or scrolled, the application throws a runtime error:
This happens because the internal ref (containerSizeRef.current) is undefined when the virtualizer tries to access it, causing the dropdown to fail or crash.
Are you reporting an Accessibility issue?
None
Suggested severity
Urgent - No workaround and Products/sites are affected
Products/sites affected
No response
Are you willing to submit a PR to fix?
no
Validations
- Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
- The provided reproduction is a minimal reproducible example of the bug.