diff --git a/change/@fluentui-react-519e3c9c-d7fd-40f6-b9f7-6a2d2e1af28f.json b/change/@fluentui-react-519e3c9c-d7fd-40f6-b9f7-6a2d2e1af28f.json new file mode 100644 index 0000000000000..a91ebdd32a648 --- /dev/null +++ b/change/@fluentui-react-519e3c9c-d7fd-40f6-b9f7-6a2d2e1af28f.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "DetailsList has been modified to warn when \"getKey\" and \"selection\" props are passed simultaneously. The \"getKey\" property is never used if a Selection object is passed. Either the \"getKey\" prop from the Selection object is used, or Selection's default getKey implementation (item) => item.key is used, but never the \"getKey\" prop passed to DetailsList. Making \"getKey\" and \"selection\" mutually exclusive DetailsList properties prevents users from making this mistake.", + "packageName": "@fluentui/react", + "email": "alexok@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/packages/react-examples/src/react/DetailsList/DetailsList.Documents.Example.tsx b/packages/react-examples/src/react/DetailsList/DetailsList.Documents.Example.tsx index decd91a48a18c..97354b43c6e83 100644 --- a/packages/react-examples/src/react/DetailsList/DetailsList.Documents.Example.tsx +++ b/packages/react-examples/src/react/DetailsList/DetailsList.Documents.Example.tsx @@ -167,6 +167,7 @@ export class DetailsListDocumentsExample extends React.Component<{}, IDetailsLis selectionDetails: this._getSelectionDetails(), }); }, + getKey: this._getKey, }); this.state = { @@ -214,7 +215,6 @@ export class DetailsListDocumentsExample extends React.Component<{}, IDetailsLis compact={isCompactMode} columns={columns} selectionMode={SelectionMode.multiple} - getKey={this._getKey} setKey="multiple" layoutMode={DetailsListLayoutMode.justified} isHeaderVisible={true} diff --git a/packages/react/src/components/DetailsList/DetailsList.base.tsx b/packages/react/src/components/DetailsList/DetailsList.base.tsx index 09b38b4f71e8c..67410fc3a4a13 100644 --- a/packages/react/src/components/DetailsList/DetailsList.base.tsx +++ b/packages/react/src/components/DetailsList/DetailsList.base.tsx @@ -10,6 +10,7 @@ import { classNamesFunction, css, memoizeFunction, + warnMutuallyExclusive, } from '../../Utilities'; import { CheckboxVisibility, @@ -58,6 +59,7 @@ import type { IGroupedList, IGroupDividerProps, IGroupRenderProps, IGroup } from import type { IListProps } from '../../List'; const getClassNames = classNamesFunction(); +const COMPONENT_NAME = 'DetailsList'; export interface IDetailsListState { focusedItemIndex: number; @@ -822,6 +824,10 @@ export class DetailsListBase extends React.Component