List formatting: Group Header calculations and formatting broken in new Lists experience

[z3019494]

Target SharePoint environment

SharePoint Online

What SharePoint development model, framework, SDK or API is this about?

Declarative list formatting

Developer environment

None

What browser(s) / client(s) have you tested

• [ ] 💥 Internet Explorer
• [ ] 💥 Microsoft Edge
• [ ] 💥 Google Chrome
• [ ] 💥 FireFox
• [ ] 💥 Safari
• [ ] mobile (iOS/iPadOS)
• [ ] mobile (Android)
• [ ] not applicable
• [ ] other (enter in the "Additional environment details" area below)

Additional environment details

• browser version
• SPFx version
• Node.js version
• etc

Describe the bug / error

Also: https://github.com/SharePoint/sp-dev-docs/issues/9756#issuecomment-2275127209

Steps to reproduce

Create view formatting which has some calculations in it.

Example: "groupProps": { "headerFormatter": { "elmType": "div", "style": { "flex-direction": "row" }, "children": [ { "elmType": "div", "attributes": { "class": "=if(indexOf(@group.fieldData,'7MAT') != -1, 'sp-css-backgroundColor-BgCornflowerBlue sp-css-borderColor-CornflowerBlueFont sp-css-color-CornflowerBlueFont', if(indexOf(@group.fieldData,'8MAT') != -1, 'sp-css-backgroundColor-BgMintGreen sp-css-borderColor-MintGreenFont sp-css-color-MintGreenFont',if(indexOf(@group.fieldData,'9MAT') != -1, 'sp-css-backgroundColor-BgGold sp-css-borderColor-GoldFont sp-css-color-GoldFont',if(indexOf(@group.fieldData,'10MAT') != -1 || indexOf(@group.fieldData,'10SS') != -1, 'sp-css-backgroundColor-BgCoral sp-css-color-CoralFont',if(indexOf(@group.fieldData,'11MA') != -1, 'sp-css-backgroundColor-BgDustRose sp-css-color-DustRoseFont',if(indexOf(@group.fieldData,'12MA') != -1 || indexOf(@group.fieldData,'MX') != -1,'sp-css-backgroundColor-BgCyan sp-css-color-CyanFont' , 'sp-css-backgroundColor-warningBackground sp-css-color-warningFont'))))))" }, "style": { "display": "inline-flex", "height": "25px", "border-radius": "15px", "padding-left": "8px", "padding-top": "5px" }, "children": [ { "elmType": "span", "attributes": { "iconName": "=if(indexOf(@group.fieldData,'MA') != -1 || indexOf(@group.fieldData,'MX') != -1 || indexOf(@group.fieldData,'SS') != -1, 'Group', 'GroupedList')" }, "style": { "padding-right": "6px", "padding-top": "2px", "font-size": "medium" } }, { "elmType": "div", "style": { "display": "inline-flex", "padding-right": "9px" }, "children": [ { "elmType": "div", "txtContent": "=if(indexOf(@group.fieldData,'MA') != -1 || indexOf(@group.fieldData,'MX') != -1 || indexOf(@group.fieldData,'SS') != -1, 'Class: ' + @group.fieldData, 'Topic ' + @group.fieldData + ' | ')", "attributes": { "title": "[email protected]", "class": "ms-fontWeight-bold" }, "style": { "padding-left": "5px" } }, { "elmType": "div", "style": { "padding-left": "5px", "display": "=if(indexOf(@group.fieldData,'MA') != -1 || indexOf(@group.fieldData,'MX') != -1 || indexOf(@group.fieldData,'SS') != -1,'none','')" }, "attributes": { "class": "ms-fontWeight-bold" }, "txtContent": "@group.count" }, { "elmType": "div", "style": { "padding-left": "5px" }, "attributes": { "class": "ms-fontWeight-normal" }, "txtContent": "= if(indexOf(@group.fieldData,'MA') != -1 || indexOf(@group.fieldData,'MX') != -1 || indexOf(@group.fieldData,'SS') != -1 ,'',if(@group.count!= 1,'items','item')" } ] } ] } ] } }

Expected behavior

The "pill" should contain all of the text.

Calculated values in the pill should not be displayed as some float.

See: https://github.com/pnp/List-Formatting/tree/master/view-samples/student-class-learning-tracker