Large datasets will only render 100 rows at any time

[cbroome]

Describe the bug
I have a large data set I'm loading into the select tool at one time, there's about 20 parent nodes, but each parent can have thousands of children. When expanding such a parent only 100 rows will be displayed at any time, this includes parents and children. There seems to be no way to get the remainder of the rows to display properly.

Looking at the code briefly it seems this is an issue with the infinite scroll plugin and not calculating the total number of nodes properly.

To Reproduce
Please include steps to reproduce the behavior;

I set up an example here:
https://codesandbox.io/s/using-bootstrap-styles-with-react-dropdown-tree-select-forked-9nkwb?file=/index.js

I used md5s to obscure the names but you'll notice that expanding the second parent node will remove the following parent nodes and only render a subset of the children.

Expected behavior
All child rows should be visible if not scrollable. Parent nodes should always be visible.

Environment (please complete the following information):

• Chrome 87.0.4280.88
• OS: MacOS

[mrchief]

@cbroome That's by design. As you scroll up or down, it'll render the remaining rows. Rendering every single row slows the page down. The user cannot see beyond 100 records in most cases anyway.

[cbroome]

@mrchief - Thanks for the quick response

Rendering every single row slows the page down.

I agree with that logic.

As you scroll up or down, it'll render the remaining rows

I'm not seeing that behavior with the example posted. Scrolling to the bottom of the displayed rows just stops. If there's a trigger to render the next 100 entries, it's not firing.

[mrchief]

I just checked the docs page:

[cbroome]

Here you go.

There are many more children to display, and the parent nodes become inaccessible as well.

[mrchief]

Seems like you're missing a css to add overflow

[cbroome]

Looks like it's applied by default to the react-dropdown-tree-select element. Was there another element that needs overflow applied?

https://codesandbox.io/s/using-bootstrap-styles-with-react-dropdown-tree-select-forked-9nkwb?file=/index.js

[mrchief]

No not that one, the outer div. Are you bringing in the default styles?

[cbroome]

Ah that was it. Applying max-height and overflow-y to dropdown-content fixed the issue. Thanks for sticking with it.