New modern UI document library view formatting: customCardProps triggered to fast or not at all

[XueSheng-GIT]

Target SharePoint environment

SharePoint Online

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

not applicable

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 135

Describe the bug / error

This issue was already reported for new list experience (#9868). Now that the new mordern ui has been published for document libraries, the same issue applies to it.

customCardProps do not work properly in new modern ui for document libraries.
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 document libraries.

Modern UI experience (Document library):
https://github.com/user-attachments/assets/1ca941f5-8ec1-44ef-bccb-94289825d3ea

"OLD" UI (Document library):
https://github.com/user-attachments/assets/aecb189d-820f-47ee-ac5c-fb70fe2a90c4

Steps to reproduce

1. Create a document library
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": "Hello World!"
        },
        "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.

[Ashlesha-MSFT]

Hello @XueSheng-GIT,
Thank you for bringing this issue to our attention. We will look into it and get back to you shortly.

[Ashlesha-MSFT]

@XueSheng-GIT,
We were able to reproduce the issue.

To this changed behavior, we have logged this as a bug, and our engineering team will look into it.
Thank you for your patience!

[XueSheng-GIT]

@Ashlesha-MSFT thanks for taking care! Actually, it was said to be on priority for lists since August 2024 (#9868 (comment)). But I didn't receive further feedback about it since quite some time. Would be great if this issue could be fixed for lists and document libraries.