[List] Scroll to a specific item in the list

[deepfriedbrain]

Do we have an API to scroll to a specific item in the list (either in 0.x or 1.x version)? It's particularly tricky to achieve this when the list has sub headers and nested items.

My use case is that user clicks on an item outside of the list. System finds that item in the list and brings it to the center (or top) of the list.

If it's not available, can this be an enhancement request for future?

[support[bot]]

👋 Thanks for using Material-UI!

We use the issue tracker exclusively for bug reports and feature requests, however, this issue appears to be a support request or question. Please ask on StackOverflow where the community will do their best to help. There is a "material-ui" tag that you can use to tag your question.

If you would like to link from here to your question on SO, it will help others find it. If your issues is confirmed as a bug, you are welcome to reopen the issue using the issue template.

[oliviertassinari]

@deepfriedbrain I believe it's a generic DOM question, unrelated to Material-UI.

[deepfriedbrain]

@oliviertassinari I agree. Let me clarify that I'm not asking for a "how to" here.

I've already built the code to achieve this for a simple lists (without sub headers or nesting) in my application. But adding headers and nested lists to the mix make it very tricky. Now I have to take into consideration the differences in heights of different elements, and whether the nested lists are expanded or not, and the type of device etc.

This is a common feature found on Lists elements in other UI libraries that I've used in the past (not referring particularly to React Libraries). I noticed that even React Native has an API for this (https://facebook.github.io/react-native/docs/flatlist.html#scrolltoindex).

Today each application that uses this library has to build its own custom solution for scrollTo. If there was an API provided in the library, it would make things so much easier for everyone who needs this feature.

Therefore, I came here to suggest this as an "enhancement" request.

[oliviertassinari]

Why don't you use the .scrollIntoView() API?

[deepfriedbrain]

Sorry for the late response, but which .scrollIntoView() API are you referring to? I didn't find it in MUI.

Is it this by any chance: https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView ? If so, it's an experimental technology and not supported on IE and Safari.

[oliviertassinari]

@deepfriedbrain I was referring to the web API. I'm sure you can find some polyfills, like https://github.com/Treora/scroll-into-view.

[jankalfus]

You can use RootRefto wrap your component https://material-ui.com/api/root-ref/. Then use rootRef on that to access the underlying DOM node and use the standard DOM .scrollIntoView() API.

[RonanFelipe]

@deepfriedbrain Could I ask you how you have done it?

[deepfriedbrain]

@RonanFelipe I get the DOM nodes, and keep track of node top, node height, window height, etc. using HTML APIs. Following are some random snippets of the code to give you an idea.

        let node = this.refs.listName;
        let childNodes = node.childNodes;

        //...

        let totalNodeHeight = node.scrollHeight;
        let nodeTop = node.scrollTop;
        let nodeHeight = node.offsetHeight;
        let windowHeight = window.innerHeight;

        //...

        selItemTop = origPos;
        selItemBottom = selItemTop + childNodes[0].offsetHeight;

        //...

        window.scrollTo(0, origPos);

        //...

        node.scrollTop = origPos;