Fluentui: Grouped Details List not observing changes to groups and items

[dps88]

Environment Information

• Package version(s): (7.143.0)
• Browser and OS versions: (n/a)

Please provide a reproduction of the bug in a codepen:

Codepen

Actual behavior:

Grouped Details List is not observing changes to groups or items. Demo simplified to switching between different sets of groups and items. Switching to a non-grouped list between swapping group sets is 'working', but that's obviously not ideal.

Non-Grouped & Changing Items

Grouped and Changing Groups

Grouped and Changing Items

Expected behavior:

Different groups should update the GroupedList with the new set of groups. Updating the items in the same group set, should update the nested items.

Priorities and help requested:

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

Requested priority: (Blocking)

[paulgildea]

@dps88 Thanks for the issue.

This might be by design, diffing a complex data structure can be perf sensitive, so @dzearing is this something the GroupList does automagically? or is this something the author needs to help with.

[BreakfastMaintenance]

I've noticed this too, I think it's down to the new getDerivedStateFromProps() method in GroupedList.base.tsx (PR #14980).

It destructures groups from nextProps, but then compares groups with nextProps.groups to see if the groups have changed, which as far as I can see will always match, hence a change to groups on the GroupedList doesn't trigger a re-render:

    const { groups, selectionMode, compact } = nextProps;
    let shouldForceUpdates = false;

    ...

    if (nextProps.groups !== groups) {
      nextState = {
        ...nextState,
        groups: nextProps.groups,
      };
    }

Is this a bug, or have I misunderstood the way it's meant to work? I can't even use the version object to force an update, since this only resets the version object itself in state and the groups collection remains as is:

    nextState = {
      ...previousState,
      listProps: nextProps.listProps,
    };

    ...

    if (shouldForceUpdates) {
      nextState = {
        ...nextState,
        version: {},
      };
    }

If my groups haven't loaded on the first render, this means my grouped list never actually renders anything.

[dps88]

I doubt it is by design. The Grouped Details List was working as described as of 7.137.3, so this change has happened quite recently. I suspect it was introduced with #14980

edit: I noticed the same behavior that @BreakfastMaintenance mentioned after attempting to update packages. Seems to break some core functionality.

edit2: Changes to the groups were working in 7.137.3. Changes to the items in a grouped list were not being observed, but that does seem to be a pretty reasonable expectation.

[dzearing]

It is definitely not by design. Thanks for reporting @dps88 . There were recent changes which busted this.

Should be addressed here: https://github.com/microsoft/fluentui/pull/15321

Includes added unit tests.

[BerserkerDotNet]

@dzearing, I'm having a similar issue with nested groups. When expending a nested group (2nd level) it does not update the list. Resulting in the group not being expanded. When I do any action that triggers props change it re-renders and shows the group correctly (expanded). Will this be fixed by your PR?

[BreakfastMaintenance]

Just checked with version 7.144.1 and it's working again for me now. Also the issue which @BerserkerDotNet mentioned appears to be fixed too :) thanks for hopping on this so quickly!

[BerserkerDotNet]

I can confirm that the issue with multi-level expand is fixed :) Thank you!

[xieofxie]

Hi @dzearing in the codepen above, 'Grouped and Changing Items' is not working. Is there something wrong? Thanks~