Fluentui: GroupedList content will disappear when scroll.

[callmedhh]

Environment Information

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

Please provide a reproduction of the bug in a codepen:

Go to this code pen link https://codepen.io/callmedhh/pen/eYOpEGr

Change the height of the embed result window to about half of the screen. Scroll down.

Actual behavior:

The list should scroll right.

Expected behavior:

The content will disappear when we scroll down the list.

I have some investigation, it is related to the three layers grouped list. In List.tsx, when scroll in the list. It will call _buildPages function to automatically calculate the new pages to show in page. But the results is not right when there are too many layers and the content in the layers is too long to show in the window.

Priorities and help requested:

Are you willing to submit a PR to fix? (Yes, No) No

Requested priority: (Blocking, High, Normal, Low) High

Products/sites affected: (if applicable)

[JasonGore]

I initially had trouble seeing an issue with the CodePen but eventually the content just disappears entirely leaving a white page. This happens both with the embedded CodePen window and with CodePen in Debug Mode. The initial page load seems to take very long, as well, with the scrollbar moving while not showing any content.

@KevinTCoughlin Is GroupedList practical for large data sets like this?

[lanzhenw]

@JasonGore I encountered a similar issue when I use grouped DetailsList. if the content is longer than the page frame, it automatically closes the expanded list.

[JasonGore]

Possible duplicate of #10053

[SimSpfx]

Hello,

You should disable virtualisation. In my case that causes the scrolling and render issues. It disables the functionality of dynamic loading and showing items on scroll. You might lose a bit of performance but not much.

Short example:

      <GroupedList className={styles.refinementContainer}
                   items={items}
                   groups={groupsWithCollapseState}
                   onRenderCell={this._onRenderFilterItem}
                   onShouldVirtualize={this._onTest}

                   groupProps={
                     {
                       onRenderHeader: this._onRenderHeader,

                     }
                   }

public _onTest(props: IListProps): boolean{
  return false;
}

In the method you should insert some logic for counting the items per group. That case you can derive if it is needed

Cheers
Simon

[jsomdev]

@SimSpfx , I use the same workaround, but for performance reasons I hope this bug get's solved :)