Fluentui: Grouped DetailsList Uses Group Name as a key Instead of the Provided key

[canmenekse]

Codepen Reproduction :
Codepen Link

Actual behavior:

Grouped List creates divs where it uses the name of the groups as keys. It throws duplicate key errors in the console ( it happens in the codepen provided too)

Expected behavior:

Grouped List should use the key provided to the group as the key

Priorities and help requested:

Are you willing to submit a PR to fix? (Yes, No): I don't know how to fix it yet

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

tagging @KevinTCoughlin

[JasonGore]

The source of the problematic key is _getPageSpecification() in GroupedList.base.tsx which only uses pageGroup.name to generate the key. A potential fix is to use pageGroup.key if present and only fall back to pageGroup.name if key is not present.

[KevinTCoughlin]

The source of the problematic key is _getPageSpecification() in GroupedList.base.tsx which only uses pageGroup.name to generate the key. A potential fix is to use pageGroup.key if present and only fall back to pageGroup.name if key is not present.

Thanks @JasonGore, made implementing the fix super easy 👍. Adding unit tests now and will PR.

return {
  key: pageGroup && (pageGroup.key || pageGroup.name)
};

Actually, since IGroup.key is required and meant for providing a unique key whereas name is not I _may_ opt to not default here.

return {
  key: pageGroup && pageGroup.key
};

[msft-github-bot]

:tada:This issue was addressed in #6979, which has now been successfully released as [email protected].:tada:

Handy Links:

• Release Notes
• Official NPM Release
• Test the release with Developer Demo Site