DetailsList ignoring last folders and files

[piedras77]

trafficstars

Environment Information

• Package version(s): "office-ui-fabric-react": "7.168.2",
• Browser and OS versions: Edge / Chrome

Please provide a reproduction of the bug in a codepen: https://codepen.io/spiedra/pen/KKXRaEK?editors=1111

Actual behavior:

DetailsList is, sometimes, not rendering the last items on a long list. This error is transient and seems to be connected with how you scroll and the virtualization associated with it. We need to use virtualization, thus turning it off wouldn't work for us. For example, sometimes the last folders or files do not appear, but data-wise they should be there, and if you re-scroll or resize the screen the elements appear.

Also, sometimes when the last items are not rendering, the whole list blinks. Usually, scrolling again or re-sizing the screen or component manually fixes the issue. Please let me know what you think.

Expected behavior:

All the elements should appear and DetailsList should not ignore the last elements. Also, the link should never blink randomly.

Priorities and help requested:

Are you willing to submit a PR to fix? Yes

Requested priority: Blocking

Products/sites affected: Azure Machine Learning Notebooks

[msft-fluent-ui-bot]

Because this issue has not had activity for over 180 days, we're automatically closing it for house-keeping purposes.

Still require assistance? Please, create a new issue with up-to date details.

[spmonahan]

Hello! I've recently merged #24460 which introduces a new version of GroupedList called GroupedListV2. V2 is an API-compatible reimplementation of GroupedList (GroupedList being the control that provides nesting for DetailsList). While I've tested V2 it is essentially an all-new control and as such is being released as "unstable". This means a couple things:

1. The API is subject to change. I don't expect any changes since it is meant to be compatible with GroupedList.
2. Not all features from GroupedList are currently implemented. For example there are outstanding issues with ARIA and drag and drop is not implemented.

As such V2 is not current suitable for use in production. However, it does fix the rendering issue and I'd appreciate you dropping it into a dev or preview environment to verify that V2 works in your application.

To use GroupedListV2 with DetailsList make sure you're on @fluentui/[email protected] or later. Then:

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

// ....

<DetailsList
  groupProps={{
    groupedListAs: GroupedListV2 // new prop that overrides the default GroupedList renderer
  }}
  // ... all other props as before
/>

Please try out GroupedListV2 in your application and if you encounter issues please file a bug report and assign it to me.

[spmonahan]

This was released for Fabric 7 in v7.202.0