DetailsList: onRenderMissingItem is always triggered without scrolling to the last row

[macel94]

Environment Information

• Package version(s): latest

Please provide a reproduction of the bug in a codepen:

Originally posted in #16233

Actual behavior:

For DetailsList: onRenderMissingItem is always triggered without scrolling to the last row using a small list.

Expected behavior:

onRenderMissingItem is only triggered when rendering the row that is indeed null.

Priorities and help requested:

Are you willing to submit a PR to fix? No

Requested priority: Low

I also want to say that we adopted a different approach to work around the problem:

.detailsListFix { max-height: 40vh; overflow-x: auto; overflow-y: auto; padding-top: 20px; padding-right: 4px; padding-bottom: 20px; padding-left: 4px; position: relative; }

We used CSS to make the detailsList have a specific height and when it exceeds the browser makes you use a scrollbar; Then we used the height of contents using the onScroll event to fetch data only when bottom is reached to obtain an infinite scroll experience that really gets triggered only when the user sees the last element of the list and tries to scroll even further.

[dgreene1]

Reproduction steps:

1. navigate here https://codepen.io/dgreene1/pen/qBxzxGW?editors=1111

2. Turn on "Simulate async loading" under the "Configure" command widget.

3. Scroll all the way down the bottom by dragging the vertical scroll to the bottom

4. Might have to repeat step 3 a few times