Предотвратить щелчок заголовка в сгруппированном списке компонентов Office UI Fabric.

Question

У меня есть Office UI Fabric Сгруппированный DetailsList с событием onActiveItemChanged. Я хочу, чтобы событие не срабатывало, когда пользователь щелкает сам заголовок группы . Событие должно срабатывать только тогда, когда пользователь нажимает на строку.

Я не нашел свойства, обеспечивающего такое поведение, поэтому вместо этого я попробовал этот подход:

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

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

Это работает как в Chrome, так и в Edge, но в IE11 событие onActiveItemChanged все еще вызывается.

Есть идеи?

Answer 1

Я не нашел другого способа решить эту проблему, кроме этого трюка:

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

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

    // navigate code here
}