Fluentui: [Keyboard Navigation] 'End' key does not focus the last item in List

[avenezia]

Environment Information

• Package version(s): 7.59.3
• Browser and OS versions: Chrome 78.0.3904.108

Describe the issue:

'End' key does not focus the last item in the list: it focuses the last item of the last page that is available in the DOM, and this is inconsistent with the behavior of the 'Home' button that always focuses the first item of the list.

Please provide a reproduction of the issue in a codepen:

https://codepen.io/avenezia/pen/jOEOVJg (it corresponds to the codepen for your DetailsList - Basic page)

Actual behavior:

'End' key focuses the last item of the last page that is available in the DOM

Expected behavior:

'End' key focuses the last item of the list

Documentation describing expected behavior

[xugao]

Thanks for reporting @avenezia. I will work on a fix for it

[xugao]

@avenezia , this is because the list is virtualized:
_Performance is important, and DOM content is expensive. Therefore, limit what you render. List applies this principle by using UI virtualization. Unlike a simple for loop that renders all items in a set, a List only renders a subset of items, and as you scroll around, the subset of rendered content is shifted. This gives a much better experience for large sets, especially when the per-item components are complex/render-intensive/network-intensive._

In this case, when you key nav End, the focus will land on the _last_ list item that is actually rendered in the DOM.

I will go ahead and mark this as by design. If you really would like to fix this, one option you have is to use onShouldVirtualize prop to disable virtualization. But do be aware of the potential perf concern.

[avenezia]

For me the fact that the list is virtualized is just an implementation detail that should not impact the user experience: and here I think the experience is broken because 'End' does not focus the last item of the list, and it is not consistent with the behavior of 'Home'. For this reason I believe this should be fixed rather than being marked as By Design.

[xugao]

Agree @avenezia :) I will look into fixing

[xugao]

@avenezia - sorry that due to the complexity of the component and the risk of introducing regressions, we won't be fixing this issue