Fix for pnp#86

Author: estruyf

CHANGELOG.JSON

@@ -11,10 +11,11 @@
         ],
         "fixes": [
           "Bug in `TaxonomyPicker` where values are not updated by an async change [#83](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/83)",
-          "`FieldUserRenderer` uses email prop for `GetPropertiesFor` [#84](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/84)"
+          "`FieldUserRenderer` uses email prop for `GetPropertiesFor` [#84](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/84)",
+          "Fixed issue in single selection mode when all group items were selected in the `ListView` when user clicked on the group header [#86](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/86)"
         ]
       },
-      "contributions": []
+      "contributions": ["Asish Padhy", "Alex Terentiev"]
     },
     {
       "version": "1.4.0",

CHANGELOG.md

@@ -14,6 +14,7 @@
 
 - Bug in `TaxonomyPicker` where values are not updated by an async change [#83](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/83)
 - `FieldUserRenderer` uses email prop for `GetPropertiesFor` [#84](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/84)
+- Fixed issue in single selection mode when all group items were selected in the `ListView` when user clicked on the group header [#86](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/86)
 
 ## 1.4.0
 

docs/documentation/docs/about/release-notes.md

@@ -14,6 +14,7 @@
 
 - Bug in `TaxonomyPicker` where values are not updated by an async change [#83](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/83)
 - `FieldUserRenderer` uses email prop for `GetPropertiesFor` [#84](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/84)
+- Fixed issue in single selection mode when all group items were selected in the `ListView` when user clicked on the group header [#86](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/86)
 
 ## 1.4.0
 

src/controls/listView/ListView.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { DetailsList, DetailsListLayoutMode, Selection, SelectionMode, IGroup } from 'office-ui-fabric-react/lib/DetailsList';
 import { IListViewProps, IListViewState, IViewField, IGrouping, GroupOrder } from './IListView';
-import { IColumn } from 'office-ui-fabric-react/lib/components/DetailsList';
+import { IColumn, IGroupRenderProps } from 'office-ui-fabric-react/lib/components/DetailsList';
 import { findIndex, has, sortBy, isEqual, cloneDeep } from '@microsoft/sp-lodash-subset';
 import { FileTypeIcon, IconType } from '../fileTypeIcon/index';
 import * as strings from 'ControlStrings';
@@ -376,6 +376,18 @@ export class ListView extends React.Component<IListViewProps, IListViewState> {
    * Default React component render method
    */
   public render(): React.ReactElement<IListViewProps> {
+    let groupProps: IGroupRenderProps = {};
+    // Check if selection mode is single selection,
+    // if that is the case, disable the selection on grouping headers
+    if (this.props.selectionMode === SelectionMode.single) {
+      groupProps = {
+        headerProps: {
+          onToggleSelectGroup: () => null,
+          onGroupHeaderClick: () => null,
+        }
+      };
+    }
+
     return (
       <div>
         <DetailsList
@@ -386,7 +398,8 @@ export class ListView extends React.Component<IListViewProps, IListViewState> {
           selection={this._selection}
           layoutMode={DetailsListLayoutMode.justified}
           compact={this.props.compact}
-          setKey="ListViewControl" />
+          setKey="ListViewControl"
+          groupProps={groupProps} />
       </div>
     );
   }

src/webparts/controlsTest/components/ControlsTest.tsx

@@ -296,7 +296,7 @@ export default class ControlsTest extends React.Component<IControlsTestProps, IC
           iconFieldName='ServerRelativeUrl'
           groupByFields={groupByFields}
           compact={true}
-          selectionMode={SelectionMode.multiple}
+          selectionMode={SelectionMode.single}
           selection={this._getSelection} />
 
           <p><a href="javascript:;" onClick={this.deleteItem}>Deletes second item</a></p>