Not able to scroll down far enough

[Eainde]

Describe the bug
When I expand a tree and the list is very long it is not allowing me to scroll down far enough and I am not able to see the next parent. It works fine if there is a small list of children then It works fine but for long lists, it is causing an issue.

Expected behavior
If there is a long list it should allow me to scroll down and see all the children associated to the parent and it should also allow me to see the next parent

Environment (please complete the following information):

• Browser: Chrome, IE, Firefox
• OS: Windows, Mac
• node version: 8.11.1
• npm version: 5.6.0

[Eainde]

This is only happening in Material design, in bootstrap design, it is working fine.
I have attached the snapshots for your reference.

[mrchief]

@Eainde It may be possible that Material Design's referenced version is an older one. Can you update to latest and try again?

[Eainde]

Yes, I have updated the version. I am using 1.16.0. You can find this defect in the editor, which is mentioned in the demo link.

Editor Link: https://dowjones.github.io/react-dropdown-tree-select/#/story/with-material-design-styles

[mrchief]

I tried to repro the issue but I don't see it. Here's a screenshot:

Are you expecting a scrollbar to appear within the menu? If so, then you'll have to apply CSS to get that. Here's an example.

[Eainde]

No, I am not expecting that. If any parent tag has a large set of children eg 100 and if you scroll down you won't be able to see the next parent tag. eg Bind 100 children to VP Accounting and scroll down to the end, you won't be able to see Database Administrator |||. You have to shrink the expansion in order to see the next parent value.

[mrchief]

100 children to VP Accounting and scroll down to the end, you won't be able to see Database Administrator |||

Oh, I see what the problem is now. In order to support large trees, we cap at 100 child nodes and use onscroll event to draw more child nodes. The problem is that the component is listening to the container's onScroll which never happens in your case (it's the window that scrolls).

This is an unhandled case which should be handled. I don't have any ideas right now but
I would start at conditionally setting the scrollableTarget here based on whether the parent has overflow or not. If detecting a css property seems like too much of a hack then we'd have to introduce a boolean prop and let the users tell us if they have overflow enabled or not.

Would you be interested in contributing a fix for this?

[mrchief]

@allcontributors[bot] please add @Eainde for bug

[allcontributors]

@mrchief

I've put up a pull request to add @Eainde! 🎉

[yogeshchourey]

@mrchief : Is this issue fixed ? Please let me know the release number

[mrchief]

@yogeshchourey No, it’s not. If you'd like to help, I'll gladly accept a PR.

[ldeveber]

We are also experiencing this issue

[kirti3]

Hi
We also experiencing this issue , kindly please update whenever it is fixed. Please update asap and it's looks like a blocker for our release.

[lyleaigbedion]

Hi, can you provide more clarification as to what can be done to solve this issue?

[lyleaigbedion]

I actually found a work around for my project. I added .dropdown-content{ overflow-y: auto } to my css and it scrolls properly for me.

[hyeluri]

I am using material-ui and I had to add both of these:

.dropdown-content .infinite-scroll-component {
overflow-y: inherit;
}

.dropdown-content{ overflow-y: auto }

[mrchief]

Please start a new discussion or issue.