FluentUI detailsList with groups - is there a way to prevent the group row from being selected

Question

i took a look at the fluent detailsList grouped example in the official page of fluentUI: https://developer.microsoft.com/en-us/fluentui#/controls/web/detailslist/grouped

and edited their example a bit so some of the groups has 1 row

now when I select the item in the row the group row (the group title) is also selected

I want to prevent that. is there a way?

user_5289334 · Answer

A quick workaround would be doing it by CSS:

if an element has ms-GroupHeader is-selected classes, means it is a gruop header and also is selected, so you change set the background-color.

You probably can pass a className to group components like this