Person components in a Fluent UI DetailsList do not update [BUG]

[raytri]

Describe the bug My bug is an exact duplicate of this one: https://github.com/microsoftgraph/microsoft-graph-toolkit/issues/690

Except with mgt-react 3.1.3 and @fluentui/react 8.114.0

I have an SPFx React webpart that contains a FluentUI DetailsList, . One of the grid columns contains a mgt-react Person component. The grid renders just fine, but when I sort or filter the grid, all the columns update except the one containing the Person component.

To Reproduce Steps to reproduce the behavior:

1. In an SPFx webpart, add a Fluent UI DetailsList
2. Make one of the columns display a Person component from mgt-react
3. Sort the columns; they all update except the Person component
4. Add a control that filters the detailList items, such as a Fluent UI SearchBox. Filter the items. They filter down to the proper items, but the Person component does not update

Expected behavior When a user sorts or filters a detail list, mgt-react Person components in the list will update

Environment (please complete the following information):

• OS: Windows
• Browser: Chrome and Edge
• Framework: React, SPFx
• Context: SharePoint
• Version: mgt-react 3.1.3, mgt-spfx 3.1.3, SPFx Framework 1.18.1
• Provider: mgt-react 3.1.3 SharePointProvider

[sebastienlevert]

Can you share a quick repro of this? You can start with this empty project and fork it: https://aka.ms/mgt/react/starter

[raytri]

Can you share a quick repro of this? You can start with this empty project and fork it: https://aka.ms/mgt/react/starter

Here's a (mostly) working version, including my versions of the various npm packages: https://stackblitz.com/edit/mgt-react-vite-kgtnz1?file=src%2FApp.tsx

Of course, the Person component doesn't populate in this example, because it's trying to do a query against a Microsoft Graph instance that doesn't exist. But you can at least see all the code around it.

[sebastienlevert]

Here's a working example. You need to supply a key to the component to it knows how to re-order it.

https://stackblitz.com/edit/mgt-react-vite-uj4ew7?file=package.json,src%2FApp.tsx%3AL120

The onRender method becomes the following:

onRender: (item) => {
        return (
            <Person
              key={item.id}
              userId={item.id}
              personCardInteraction={PersonCardInteraction.click}
              view={ViewType.threelines}
            />
        );
      },

Let me know if this fixes it! Thanks for providing the repro, it was super easy to debug and assist! Kudos!

[raytri]

That fixed it. Thank you so much! This issue can be closed.

Unrelated question, if I may: how did you get the stackblitz fork to display dummy people data? Did adding the key make that happen too?

[sebastienlevert]

I updated the ids of these users. We use a sandbox tenant (the same we use on Graph Explorer). So I only had to get their ids and make them available in the stackblitz!