Prevent header click on grouped Office UI Fabric DetailsList

Question

I have an Office UI Fabric Grouped DetailsList with an onActiveItemChanged event. I want the event not to fire when user clicks on the group header itself. The event should fire only when user clicks on a row.

I've found no property that gives that behaviour, so instead I've tried this approach:

<DetailsList
    onActiveItemChanged={doSomething}
    groupProps={{
      onRenderHeader: _onRenderGroupHeader
    }}
</DetailsList>

function _onRenderGroupHeader(props) {
    return (
        <div>
          {props.group.name}
        </div>
    );
};

That works in both Chrome and Edge, but in IE11 the onActiveItemChanged event is still fired.

Any ideas?

Answer 1

I didn't find any other way to solve it but with this trick:

const doSomething = (item, index, event) => {

    // IE 11 hack
    if (event.target.classList.contains('ms-List-cell')) {
        return false;
    }

    // navigate code here
}