Grouped DetailList selected count

[pbosin]

TL;DR; DetailList has parameter groupProps={{ onRenderHeader: this._onRenderGroupHeader }} but onRenderHeader is not called on every selector click.

The documentation shows how to show a grouped list https://developer.microsoft.com/en-us/fluentui#/controls/web/detailslist/grouped and how to show custom group rows: https://developer.microsoft.com/en-us/fluentui#/controls/web/detailslist/customgroupheaders

We need to show number of currently selected items in the group header which should be updated/rendered on each item selection change. the _onRenderGroupHeader method in the latter example has props, which include the current group and the selection object, from which we can infer the selected count for the group. Sounds fine.

The simplified method:

const _onRenderGroupHeader = props =>

{Header for ${props.group!.name}}

;

Inside this method I can get

const { group, selection } = props;
const { startIndex, count } = group;
const selectedIndices = selection.getSelectedIndices();
const selectedCountInGroup = selectedIndices.reduce((selectCount, idx) => (
(idx >= startIndex && idx < startIndex + count) ? selectCount + 1 : selectCount
), 0);
and display selectedCountInGroup in the header string.

But here is the PROBLEM: _onRenderGroupHeader is not executed on every selection button click in a group. I can see it called when all items are selected. Any help is appreciated!