Performance issues using multiple "customCardProps" in List Formatting

[aaclage]

Target SharePoint environment

SharePoint Online

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

Declarative list formatting

Developer environment

Windows

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

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

Additional environment details

Out of Box List format Json syntax

Describe the bug / error

After sample creation using List View with json with multiple "customCardProps" object started to have browser freeze/issues after selection of multiple customCardProps object using mouse over or click. Issue looks to be related with management the objects and how the object is released.

Human user case Mouse over action:

After some second the following error appear:

Example code below

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/row-formatting.schema.json",
  "hideColumnHeader": true,
  "hideSelection": true,
  "rowFormatter": {
    "elmType": "div",
    "children": [
      {
        "elmType": "div",
        "style": {
          "padding": "5px"
        },
        "txtContent": "click 1",
        "customCardProps": {
          "openOnEvent": "hover",
          "directionalHint": "topCenter",
          "isBeakVisible": true,
          "formatter": {
            "elmType": "div",
            "children": [
              {
                "elmType": "div",
                "style": {
                  "padding": "5px"
                },
                "txtContent": "click 1"
              }
            ]
          }
        }
      },
      {
        "elmType": "div",
        "style": {
          "padding": "5px"
        },
        "txtContent": "click 2",
        "customCardProps": {
          "openOnEvent": "hover",
          "directionalHint": "topCenter",
          "isBeakVisible": true,
          "formatter": {
            "elmType": "div",
            "children": [
              {
                "elmType": "div",
                "style": {
                  "padding": "5px"
                },
                "txtContent": "click 2"
              }
            ]
          }
        }
      },
      {
        "elmType": "div",
        "style": {
          "padding": "5px"
        },
        "txtContent": "click 3",
        "customCardProps": {
          "openOnEvent": "hover",
          "directionalHint": "topCenter",
          "isBeakVisible": true,
          "formatter": {
            "elmType": "div",
            "children": [
              {
                "elmType": "div",
                "style": {
                  "padding": "5px"
                },
                "txtContent": "click 3"
              }
            ]
          }
        }
      },
      {
        "elmType": "div",
        "style": {
          "padding": "5px"
        },
        "txtContent": "click 4",
        "customCardProps": {
          "openOnEvent": "hover",
          "directionalHint": "topCenter",
          "isBeakVisible": true,
          "formatter": {
            "elmType": "div",
            "children": [
              {
                "elmType": "div",
                "style": {
                  "padding": "5px"
                },
                "txtContent": "click 5"
              }
            ]
          }
        }
      },
      {
        "elmType": "div",
        "style": {
          "padding": "5px"
        },
        "txtContent": "click 6",
        "customCardProps": {
          "openOnEvent": "hover",
          "directionalHint": "topCenter",
          "isBeakVisible": true,
          "formatter": {
            "elmType": "div",
            "children": [
              {
                "elmType": "div",
                "style": {
                  "padding": "5px"
                },
                "txtContent": "click 6"
              }
            ]
          }
        }
      },
      {
        "elmType": "div",
        "style": {
          "padding": "5px"
        },
        "txtContent": "click 7",
        "customCardProps": {
          "openOnEvent": "hover",
          "directionalHint": "topCenter",
          "isBeakVisible": true,
          "formatter": {
            "elmType": "div",
            "children": [
              {
                "elmType": "div",
                "style": {
                  "padding": "5px"
                },
                "txtContent": "click 7"
              }
            ]
          }
        }
      }
    ]
  }
}

Steps to reproduce

1. Create a new View
2. Include sample code
3. Start moving mouse over the options multiple time until page starts to freeze

Expected behavior

customCardProps object should work correctly without page being freeze

[ghost]

Thank you for reporting this issue. We will be triaging your incoming issue as soon as possible.

[aaclage]

Dear @shagra-ms,

I would like to reference the following issue.

Thank you for your attention.

[aaclage]

Dear @shagra-ms,

It's working fine now, can you confirm this issue was fix from msft or i'm just lucky :)?

[shagra-ms]

@aaclage We fixed the issue back in September. I just forgot to follow up here. Thanks for letting me know this is working fine now :)

[aaclage]

@shagra-ms like always, thank you for the support and great work.

[ghost]

Issues that have been closed & had no follow-up activity for at least 7 days are automatically locked. Please refer to our wiki for more details, including how to remediate this action if you feel this was done prematurely or in error: Issue List: Our approach to locked issues