DetailList scrollToIndex( ) or focusIndex( ) doesn't work

[harryhtet8]

I am trying to scroll to the specified index of the list when the component is rendered using focusIndex( ) and scrollToIndex( ) but neither seems to be working.

Here's my codepen:

Would like to know if I'm missing anything or why it's not working

[spmonahan]

@iron-man14 I've looked into this a bit and there are two issues at work. One is a bug in scrollToIndex() when used with grouped DetailsList (or GroupedList). The other relates to List's rendering behavior (List being the control that DetailsList and GroupedList use under the hood to render lists).

The bug in scrollToIndex() is that, with grouped lists, each group is actually a List with its own indexes but List.scrollToIndex() only has a concept of a flat list so it does not know to look into sub-Lists. In your example the root list has 10 groups which means the list has 10 indexes so it cannot find index 450.

To address the bug in scrollToIndex() you can use the (in preview, not ready for production) GroupedListV2 which flattens nested lists:

import { GroupedListV2_unstable as GroupedListV2 } from '@fluentui/react';

<DetailsList
 {...allOtherProps}
 groupProps={{
    groupedListAs: GroupedListV2
 }}
/>

While this will allow scrollToIndex() to actually find the index the list will still not scroll ☹️ It won't scroll because there is still the issue of List's rendering behavior. List renders asynchronously, meaning that the list is not rendered by the time componentDidMount() is called but it is rendered on the next frame. This is not something we can easily change (if at all) in Lists implementation but it can be simply worked around:

componentDidMount() {
  requestAnimationFrame(() => {
    this.ref.current.focusIndex(450);
  });
}

Note that you do not need to call scrollToIndex() when using focusIndex() as focusIndex() calls scrollToIndex() internally.

I've forked and updated your example here: https://codepen.io/seanms/pen/mdLZPmo

NOTE: GroupedListV2 is missing some features from GroupedList and has some bugs. In fact I found one when answering your question: #25304. That said, GroupedListV2 is designed to address issues we've uncovered with the current nested implementation in GroupedList so it will generally be the way forward to fix issues related to nested groups in lists.

To get an idea of the missing features and work-to-be-done in GroupedListV2 check out these issues (the ones that start with "GroupedListV2"). If you need this feature sooner rather than later there are two good ways you can help move the work along. The first is to test GroupedListV2 in a non-production environment and report any bugs you find. The second is to pick of some of the issues linked above and contribute code to Fluent. I know contributing code is a big ask and I'm happy to help you get started if that's something you're interested in.