DetailsList - nested groups: rendering issue

[raphaelstary]

trafficstars

Environment Information

• Package version(s): 8.44.0
• Browser and OS versions: (fill this out if relevant)

Please provide a reproduction of the bug in a codepen:

Actual behavior:

https://codepen.io/reactraphael/pen/abLoeGR

1. open the codepen
2. scroll at once to the bottom of the DetailsList
3. DetailsList becomes unusable: flickering, expanding and shrinking, while failing to display items

When you scroll to the bottom of a large DetailsList with nested groups the list becomes unusable and doesn't show items anymore. If you scroll down slowly all items from a child group will be shown, but after the last item there is a white block, and the next group will not get rendered/shown.

You can observe the same issue (scrolling to the bottom of the list => list flashing/flickering/expanding/shrinking loop) with the first GroupedList example from the docs https://developer.microsoft.com/en-us/fluentui#/controls/web/groupedlist

Expected behavior:

A DetailsList with nested groups should just work like the docs example "DetailsList - Large Grouped": https://developer.microsoft.com/en-us/fluentui#/controls/web/detailslist/largegrouped

Priorities and help requested:

Are you willing to submit a PR to fix? No

Requested priority: High

Products/sites affected: (if applicable)

[gouttierre]

@raphaelstary - Thanks for filing this issue with us. To set expectations, the developers will review the issue once capacity allows. I see the behavior mentioned on the website.

@spmonahan - Would you be able to confirm if this is a regression, or if this behavior is an issue?

[spmonahan]

I believe this is due to how row and page heights are calculated for virtualization.

These Github issues appear to be related:

• #20037
• #20978

[sirdawidd]

It seems the height is wrongly calculated by default However even I'm hardcode the height of the group it seems not resolve problem getGroupHeight={() => 48}

Disabling virtualization helps and resolve the problem , but in my case when I have at least 1k of rows to render list takes on my pc 4 seconds where with virtualization only 1 sec. onShouldVirtualize={() => false}

The issue is even worse when you add custom group header render (onRenderDetailsHeader), which creates groups with different heights(each group differed height), and when there is few subgroups, in this scenario is not even possible to scroll at all.

This subject is repeating like boomerang, and virtualization was never working in DetailsList and GroupedList

These Github issues which are related: 1 2 3 4 5 6 ....

[spmonahan]

Thanks for adding those details @sirdawidd. I've spent some more time recently looking at this and while I don't yet have a fix I believe I now know the root cause of the issue.

DetailsList and GroupedList both render Lists and when they have nested groups they render sub Lists. Virtualization relies on a function in List called _measurePage() that does not keep up with the correct current height of these sub Lists (AFAICT it does the measurement correctly it's just a React render behind the actual measurement). Because of this the virtualization implementation thinks the list is shorter than it actually is which leads the scroll bar behavior you observed.

[piedras77]

Hello, we have a main feature that we might need to roll back because of some users experiencing this behavior. Specifically, the list jumps back to the start after scrolling when the user has deeply nested folders. Are there any updates or timelines available? The error not always reproduces

[SillyKeith]

Checking in on the status of this request as our group is also hitting this issue.

[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.

[SillyKeith]

+Alan I've asked our Dev Alan to give this a go and let you know how it works in our Test/Dev environment.

Keith Kepler Azure Light Edge | Sr. Program Manager Office (425) 703-3767 Chat with me via Teams!https://nam06.safelinks.protection.outlook.com/?url=https%3A%2F%2Fteams.microsoft.com%2Fl%2Fchat%2F0%2F0%3Fusers%3Dkeith.kepler%40microsoft.com&data=04%7C01%7CKeith.Kepler%40microsoft.com%7C0d0b01881c5e4af61a4608d90f492748%7C72f988bf86f141af91ab2d7cd011db47%7C1%7C0%7C637557629159128966%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C1000&sdata=TquijV%2BP050WBJrXaMk0Hr1g5nWtbU6XeSUYIoDAxPw%3D&reserved=0 | @.@.>

From: Sean Monahan @.> Sent: Monday, September 19, 2022 8:50 AM To: microsoft/fluentui @.> Cc: Keith Kepler @.>; Comment @.> Subject: Re: [microsoft/fluentui] DetailsList - nested groups: rendering issue (Issue #20825)

Hello! I've recently merged #24460https://nam06.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fmicrosoft%2Ffluentui%2Fpull%2F24460&data=05%7C01%7CKeith.Kepler%40microsoft.com%7C0db337e1e23f48099d2108da9a569ce7%7C72f988bf86f141af91ab2d7cd011db47%7C1%7C0%7C637991994042701887%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000%7C%7C%7C&sdata=rU810ERHColsb5XvoAh8aXM%2FTtCz2PrNnso3GTTAp%2F4%3D&reserved=0 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 @@.*** or later. Then:

import { GroupedListV2_unstable as GroupedListV2 } from @.***/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 reporthttps://nam06.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fmicrosoft%2Ffluentui%2Fissues%2Fnew%3Fassignees%3D%26labels%3DType%253A%2BBug%2B%25F0%259F%2590%259B%252CNeeds%253A%2BTriage%2B%25F0%259F%2594%258D%26template%3Dbug-report.yml%26title%3D%255BBug%255D%253A%2B&data=05%7C01%7CKeith.Kepler%40microsoft.com%7C0db337e1e23f48099d2108da9a569ce7%7C72f988bf86f141af91ab2d7cd011db47%7C1%7C0%7C637991994042701887%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000%7C%7C%7C&sdata=roeyNyCdOCrI7plUHNqNZUN26OrJ6fzw3LEUKBGoutU%3D&reserved=0 and assign it to me.

Reply to this email directly, view it on GitHubhttps://nam06.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fmicrosoft%2Ffluentui%2Fissues%2F20825%23issuecomment-1251207825&data=05%7C01%7CKeith.Kepler%40microsoft.com%7C0db337e1e23f48099d2108da9a569ce7%7C72f988bf86f141af91ab2d7cd011db47%7C1%7C0%7C637991994042858101%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000%7C%7C%7C&sdata=dF%2F99sojBjJuuifbHYDiC6OIeFN76h6gJhqikcOO%2Fcs%3D&reserved=0, or unsubscribehttps://nam06.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fnotifications%2Funsubscribe-auth%2FAG2H427W7IJMVDSFPH4EMXDV7CDSTANCNFSM5I63L2UQ&data=05%7C01%7CKeith.Kepler%40microsoft.com%7C0db337e1e23f48099d2108da9a569ce7%7C72f988bf86f141af91ab2d7cd011db47%7C1%7C0%7C637991994042858101%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000%7C%7C%7C&sdata=LOH8nvn6mNATlloPkTNphKPQ6tweWyc5hyLroF0B900%3D&reserved=0. You are receiving this because you commented.Message ID: @.@.>>

[msft-fluent-ui-bot]

This issue has been automatically marked as stale because it has marked as requiring author feedback but has not had any activity for 4 days. It will be closed if no further activity occurs within 3 days of this comment. Thank you for your contributions to Fluent UI!