MenuItem component only displays a subset of suggestions

[tugbargn]

Version
"react-bootstrap-typeahead": "^6.3.2",

Steps to reproduce
Populate the suggestions array with a large number of items.
Render the Typeahead component with the populated suggestions array.
Scroll through the menu to view all suggestions.
Expected Behavior
All suggestions received from the server should be displayed in the menu of the Typeahead component, regardless of the viewport.

Actual Behavior
Only a subset of the suggestions is displayed in the menu. This occurs because the MenuItem component inside the renderMenu function is optimized to render only the items currently visible in the viewport. As a result, not all suggestions are displayed, which can lead to a discrepancy between the suggestions received from the server and those visible in the menu.

Additional Information
To address this issue, modify the renderMenu function to directly map through all suggestions in the suggestions array, rather than relying on the results array passed to the renderMenu function. This ensures that all suggestions are rendered in the menu, regardless of the viewport. Additionally, ensure that the suggestions array is correctly populated with all suggestions received from the server before rendering the Typeahead component. If the issue persists, double-check the data received from the server to ensure it contains all expected suggestions.

[ericgio]

The list of suggestions is limited to 100 by default for performance reasons. You can modify this by either increase the number of maxResults or setting paginate to false. If you want to load a large number of results (hundreds), it's recommended you use a windowing solution to mitigate performance issues.

[tugbargn]

windowing solution says : Sandbox not found

Could you share a new link?

[ericgio]

Hey @tugbargn, I've updated the link above. All the links in the Examples section should work.