Fluentui: DetailsList: DetailsRow isSelected styling not working

[natalieethell]

Environment Information

• Package version(s): office-ui-fabric-react v7.21.0
• Browser and OS versions: N/A

Please provide a reproduction of the bug in a codepen:

https://codepen.io/naethell/pen/WVzQwq

In the CodePen, I attempt to set the color of text in a details row to red when the row's isSelected style prop is true. That style is not applied on the row until a resize event or loss of focus.

Actual behavior:

The isSelected styling does not get applied on the row until a resize event or loss of focus.

Expected behavior:

The isSelected styling should be applied when the row is selected.

Priorities and help requested:

Are you willing to submit a PR to fix? (Yes, No)

Requested priority: (Blocking, High, Normal, Low)

Products/sites affected: (if applicable)

[jdhuntington]

Hi @natalieethell - It looks like the issue is occurring due to the specificity of the rules that govern the colors when the row is highlighted or selected. I was able to modify your codepen to make the colors change on selection without a redraw.

https://codepen.io/jdh-msft/pen/bGbeppe?editors=0010

Question: Does this work for you? Do you feel like the original code should work as-is without the changes in this codepen? Would like to figure out if this should be a bug that we try and change or something we just need to document better.

[KevinTCoughlin]

Question: Does this work for you? Do you feel like the original code should work as-is without the changes in this codepen?

Thanks for figuring out the root cause @jdhuntington.

Having to write the following code:

if (detailsRowStyleProps.isSelected) {
  style.root.color = "#FF0000";
  style.root.selectors[':hover'].selectors = overrideColorForSelectedRow;
  style.root.selectors[':focus'].selectors = overrideColorForSelectedRow;
  style.root.selectors[':focus:hover'].selectors = overrideColorForSelectedRow;
}  

Seems non-intuitive and not something that folks without intimate knowledge of the code would be able to supply. The specificity issue seems like something worth fixing if trivial.

cc: @natalieethell

[lanzhenw]

@jdhuntington
@KevinTCoughlin
I encountered a similar issue. I want to overwrite the default background color of [":focus"] selectors to transparent. I tried the method as you suggested, but had some issues typing it.

What would be the type for style.root.selectors, style.root.selectors[":focus"], and style.root.selectors[":focus"].selectors?

I wrote

if (
            detailsRowStyleProps.isSelected &&
            style.root &&
            (style.root as IRawStyle).selectors &&
            ((style.root as IRawStyle).selectors as IRawStyleBase)[":focus"]
        ) {
            (style.root as IRawStyle).selectors[
                ":focus"
            ].selectors = overrideColorForSelectedRow
            style.root.selectors[
                ":focus"
            ].selectors = overrideColorForSelectedRow
            style.root.selectors[
                ":focus:hover"
            ].selectors = overrideColorForSelectedRow
        }
        return style

, but the error says IRawStyleBase does not have the ":Focus" property.

[xugao]

@lanzhenw - to answer your typing question, you can have something like the following:

const stylesForRow: IStyleFunctionOrObject<IDetailsRowStyleProps, IDetailsRowStyles> = detailsRowStyleProps => {
  const rootStyle: IRawStyle = {
    color: detailsRowStyleProps.isSelected ? '#FF0000' : undefined,
    selectors: {
      ':hover': {
        background: '#3F3F40',
        color: '#FFFFFF',
        selectors: detailsRowStyleProps.isSelected ? overrideColorForSelectedRow : undefined
      },
      ':focus': {
        background: '#FFAACC',
        color: '#FFFFFF',
        selectors: detailsRowStyleProps.isSelected ? overrideColorForSelectedRow : undefined
      },
      ':focus:hover': {
        background: '#007ACC',
        color: '#FFFFFF',
        selectors: detailsRowStyleProps.isSelected ? overrideColorForSelectedRow : undefined
      }
    }
  };

  return { root: rootStyle };
};

[xugao]

I understand the work around is ugly, but the proper fix is not something we can address in short term. marking this issue as won't fix

[msft-github-bot]

Due to the complexity and dependencies of our List components, we are actively trying to minimize risk of regressions. We sincerely apologize that we won't be able to address this issue at this moment.