Full tree not displayed after selecting a node in a large tree, closing and reopening

[SandyNisbet]

Describe the bug

This is a bug which I believe relates to the infinite scrolling and loading of 100 items at a time. After specific actions, the dropdown doesn't render more than 100.

To Reproduce
I discovered this bug while developing my own app, but it can be reproduced on the vanilla demo

• Expand nodes until there are more than 100 visible on the drop down
• Select a node at the bottom of the tree (past the 100 mark)
• Close the dropdown and reopen
• Scroll to the bottom of the tree, it does not automatically load past the 100 items.

Expected behavior
The full tree should load as normal

Environment (please complete the following information):

• Browser Chrome Latest (Version 91.0.4472.124 (Official Build) (64-bit))
• OS: Windows x64

Additional context
It would also be useful to define how many items should be initially loaded in the dropdown tree. I know it is done to avoid loading incredibly large trees in one go, but for our usage the number only ever occasionally exceeds 100 by a few. Our tree is expanded by default and it's a bit jarring to the user for the dropdown to change width and the scrollbar to jump around as it loads more.

Thanks for your help and the useful component!

[mrchief]

Expected behavior
The full tree should load as normal

Why should it? Because you selected 101st item? Doing so would defeat the purpose of having virtualization in the first place and make the component slow.

[SandyNisbet]

Expected behavior
The full tree should load as normal

Why should it? Because you selected 101st item? Doing so would defeat the purpose of having virtualization in the first place and make the component slow.

Hi there,

Thanks for your reply. I think you are misunderstanding what I am saying. I am not complaining about the virtualization itself, but reporting a bug relating to the virtualization mechanism. If you follow the reproduction steps I have listed on the demo environment, you will see that under those circumstances the component will not list more than 100 items even if you scroll to the very bottom of the tree (i.e. the next 100 items are not loaded when they should be). By "The full tree should load as normal", I mean "The next 100 items should load when you scroll to the bottom of the component", which is not happening. I can't see how this isn't a bug as I can't think of a scenario where the user wouldn't want more nodes to load when they scroll to the bottom.

[mrchief]

Ah thanks for the clarification and that definitely should not happen. I tried it on the demo but I can't reproduce it.

2021-07-01_15-43-08.mp4

You can see it loads the next set around 7 secs mark

[d-s-x]

@mrchief
I confirm there is an error in the component. You seems to omit crucial steps: closing and reopening the dropdown after an item was selected.

Please take a look at detailed steps to reproduce.

1. go to https://dowjones.github.io/react-dropdown-tree-select/#/story/large-tree
2. click "down triangle" to expand the tree
3. expand "Zitius"
4. expand "rektangel10-1" (first child of "Zitius")
5. scroll down to the bottom of the tree
6. expand "zrb-GTB-01" (last child of "Zitius")
7. scroll down to the bottom of the tree again
   observe the scroll thumb "jumps" as more items are loading -- this is expected behavior
8. select "uv-990-9 || UV-GrimstabrevFormulär || Norweigan tyskSvensBaguete ||" (last child of "zrb-GTB-01")
9. click "up triangle" to hide the tree
10. click "down triangle" to expand the tree again
11. scroll down to the bottom of the tree
    Expected: items are loaded as I scroll, last item is "uv-990-9 || UV-GrimstabrevFormulär || Norweigan tyskSvensBaguete || " (the selected one)
    Actuall: only 100 top items are displayed, no new atems are loaded, last item is "rektangel9-1".

Expand or collapse any items (for example, expand "rektangel4-1") -- the tree starts loading everything again

I reproduced the issue in latest Chromium & Firefox.

[mrchief]

I can repro this now, thanks for the steps. It seems the problem is limited to last item? I chose the 5th last child of zrb-GTB-01 and the tree loaded as expected. Will need to dig deeper but it seems like an edge case given how the last index plays a part in it. Could be some odd CSS behavior too.

Would you mind sending a PR?

[SandyNisbet]

I can repro this now, thanks for the steps. It seems the problem is limited to last item? I chose the 5th last child of zrb-GTB-01 and the tree loaded as expected. Will need to dig deeper but it seems like an edge case given how the last index plays a part in it. Could be some odd CSS behavior too.

Would you mind sending a PR?

Thanks for the clarification everyone. I wasn't at work at the weekend so was unable to respond.

To me it doesn't seem to be only the last item. As long as I select a single item near the bottom of the list, I can reproduce it.

I'm not familiar with the code so I'm afraid I can't send a PR. Our tester found this bug and I thought I could at least report it here.

[mrchief]

No worries, I'll see what I can do.

[github-actions]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 10 days if no further activity occurs. Thank you for your contributions.

[JoseSNubimetrics]

hello, it couldn't a solution be found?? I'm dealing with these too.

[yushisalvador]

any update on this?

[mrchief]

I haven't had the time to look into it. If anyone is willing to help, feel free to send a PR.

[siddhishree]

Still Facing the above issue. Has anybody found some workaround? I see a PR raised but it hasn't merged yet.