Unable to scrollToIndex() in List with dynamic height items

[redoz]

Please provide a reproduction of the bug in a codepen:

Bug Report

The scrollToIndex method on the List component does not seem usable with dynamic height list items. I somehow have to be able to measure each item and provide the height for it to work, but as the layout of each item depends on the current width of the row, and the contents inside it, the height is only known after the browser has completed layout out the elements.

So I'm wondering if it would not be possible to measure the height/position of the item in question using the componentDidUpdate method as a fall-back?

I tried disabling the virtualization (onShouldVirtualize={() => false}) but it seems then that the scrollToIndex is completely broken unless you provide a measureItem function.

• Package version(s): office-ui-fabric-react: 6.62.0
• Browser and OS versions: (fill this out if relevant)

Priorities and help requested:

Are you willing to submit a PR to fix?: Yes, but this might be beyond my abilities to fix.

Requested priority: High

Products/sites affected: (if applicable)

Describe the issue:

scrollToIndex on List is next to useless unless the consumer is able to provide a function to calculate the height of each item. But if the layout is dynamic and handled by the browser there is no way of measuring items without rendering them so the only functionality available is "scroll to the page containing the item" which is not a useful functionality from an end-user point of view.

If virtualization is disabled however, scrollToIndex appears to do not function at all without a measureItem function passed through.

Actual behavior:

scrollToIndex is not useful when the item height is unknown.

Expected behavior:

scrollToIndex should work even in situations where the item height is unknown until after the browser has layed out the components.

[redoz]

I experimented some more, and it seems that if I add getPageSpecification={() => ({itemCount: 1})} and enable the virtualization, it will work. Not sure what kind of perf hit I take from rendering a page for every row though.

[micahgodbolt]

I've got a feeling this might be a limitation of virtualization. I'm curious if other virtualized list components are able to support this, and how they do it.

[micahgodbolt]

Checking out the popular react-virtualized. Not sure if they do scrollToIndex.

https://github.com/bvaughn/react-virtualized/blob/master/docs/README.md

[micahgodbolt]

Seems they've hit similar issues bvaughn/react-virtualized#610