List view formatting: customCardProps triggered to fast or not at all (MS lists view in Sharepoint list)

[XueSheng-GIT]

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

Chrome 127

Describe the bug / error

customCardProps do not work properly in new list experience.
Moving the mouse over such items, triggers the popup too fast and sometimes not at all. Sometimes the popups do not hide again.
This behaviour was different in the old list and is still different in document libraries.

New List experience:
https://github.com/user-attachments/assets/bd8fa9b4-9292-444c-9406-ac76dbce2573

Document library:
https://github.com/user-attachments/assets/6df51990-c05f-409f-8390-a18cae40e2b3

Steps to reproduce

1. Create a list
2. Add a column (e.g. multiple choice in this example)
3. Add custom json to column with customCardProps (example below)
4. Move mouse over the customCardProps items

Column formatting example:

`{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "style": {
    "flex-wrap": "wrap",
    "display": "flex"
  },
  "children": [
    {
      "forEach": "__INTERNAL__ in @currentField",
      "elmType": "div",
      "style": {
        "box-sizing": "border-box",
        "padding": "4px 8px 5px 8px",
        "overflow": "hidden",
        "text-overflow": "ellipsis",
        "display": "flex",
        "border-radius": "16px",
        "height": "24px",
        "align-items": "center",
        "white-space": "nowrap",
        "margin": "4px 4px 4px 4px"
      },
      "attributes": {
        "class": {
          "operator": ":",
          "operands": [
            {
              "operator": "==",
              "operands": [
                "[$__INTERNAL__]",
                "Auswahl 1"
              ]
            },
            "sp-css-backgroundColor-BgCoral sp-css-borderColor-CoralFont sp-css-color-CoralFont",
            {
              "operator": ":",
              "operands": [
                {
                  "operator": "==",
                  "operands": [
                    "[$__INTERNAL__]",
                    "Auswahl 2"
                  ]
                },
                "sp-css-backgroundColor-BgDustRose sp-css-borderColor-DustRoseFont sp-css-color-DustRoseFont",
                {
                  "operator": ":",
                  "operands": [
                    {
                      "operator": "==",
                      "operands": [
                        "[$__INTERNAL__]",
                        "Auswahl 3"
                      ]
                    },
                    "sp-css-backgroundColor-BgPeach sp-css-borderColor-PeachFont sp-css-color-PeachFont",
                    {
                      "operator": ":",
                      "operands": [
                        {
                          "operator": "==",
                          "operands": [
                            "[$__INTERNAL__]",
                            "Auswahl 4"
                          ]
                        },
                        "sp-css-backgroundColor-BgGold sp-css-borderColor-GoldFont sp-css-color-GoldFont",
                        {
                          "operator": ":",
                          "operands": [
                            {
                              "operator": "==",
                              "operands": [
                                "[$__INTERNAL__]",
                                "Auswahl 5"
                              ]
                            },
                            "sp-css-backgroundColor-BgMintGreen sp-css-borderColor-MintGreenFont sp-css-color-MintGreenFont",
                            {
                              "operator": ":",
                              "operands": [
                                {
                                  "operator": "==",
                                  "operands": [
                                    "[$__INTERNAL__]",
                                    "Auswahl 6"
                                  ]
                                },
                                "sp-css-backgroundColor-BgCyan sp-css-borderColor-CyanFont sp-css-color-CyanFont",
                                {
                                  "operator": ":",
                                  "operands": [
                                    {
                                      "operator": "==",
                                      "operands": [
                                        "[$__INTERNAL__]",
                                        "Auswahl 7"
                                      ]
                                    },
                                    "sp-css-backgroundColor-BgSage sp-css-borderColor-SageFont sp-field-fontSizeSmall sp-css-color-SageFont",
                                    "sp-field-borderAllRegular sp-field-borderAllSolid sp-css-borderColor-neutralSecondary"
                                  ]
                                }
                              ]
                            }
                          ]
                        }
                      ]
                    }
                  ]
                }
              ]
            }
          ]
        }
      },
      "txtContent": "[$__INTERNAL__]",
      "customCardProps": {
        "formatter": {
          "elmType": "div",
          "style": {
            "padding": "12px"
          },
          "txtContent": "Hallo Welt!"
        },
        "openOnEvent": "hover",
        "directionalHint": "topAutoEdge",
        "isBeakVisible": true
      }
    }
  ]
}

Expected behavior

Popup of customCardProps should only be trigged after a short delay. After leaving the popup with the mouse, it should hide again after a short delay.

[XueSheng-GIT]

Maybe another aspect is that you would not expect that multiple popups appear at the same time and are overlapping each other.

[tpodugu-ms]

@XueSheng-GIT Thanks for reporting the issue. We will work on this on priority and update you the ETA.

[XueSheng-GIT]

@tpodugu-ms any progress on this matter? The issue still persists and I'm getting more an more complaints because the customCardProps do not work properly.

[XueSheng-GIT]

@tpodugu-ms Sorry to bug you again. Any info to the ETA?
This bug is quite annoying becaus those accidentially triggered customCardProps also overlay the list form so that info is hidden or fields cannot be filled (you first need to close the form, try to get rid of the accidentially triggered customCardProps and open the list form again.

[tpodugu-ms]

Hi @XueSheng-GIT. Team is actively working on the custom formatter issues. I will check with them and update.

[XueSheng-GIT]

@tpodugu-ms any news in regards to this issue? In the meantime the situation did not improve in any way.