List Formatting: Custom card with openOnEvent set to hover does not open

[tecchan1107]

Target SharePoint environment

SharePoint Online

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

💥 SharePoint Framework

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

No response

Describe the bug / error

When openOnEvent is set to hover, the custom card sometimes does not open. It seems that the custom card only displays when the area around the customCardProps element is clicked, and the focus is on that element.

On the other hand, when openOnEvent is set to click, the custom card opens without any issues.

Steps to reproduce

Create some items in the list and apply the following JSON to the view formatting

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/row-formatting.schema.json",
  "hideColumnHeader": true,
  "hideSelection": true,
  "rowFormatter": {
    "elmType": "div",
    "txtContent": "Hover to open the card",
    "style": {
      "width": "300px",
      "height": "50px",
      "border-bottom": "1px solid",
      "text-decoration": "none",
      "display": "flex",
      "flex-direction": "row",
      "font-size": "18px",
      "cursor": "default"
    },
    "attributes": {
      "class": "ms-bgColor-themeLighter--hover"
    },
    "customCardProps": {
      "openOnEvent": "hover",
      "directionalHint": "rightCenter",
      "isBeakVisible": true,
      "formatter": {
        "elmType": "div",
        "style": {
          "padding": "30px"
        },
        "children": [
          {
            "elmType": "div",
            "txtContent": "Hello World"
          }
        ]
      }
    }
  }
}

Expected behavior

Hover over an element with customCardProps set to display a custom card.

[tecchan1107]

Related sample: vertical-mega-menu

[tecchan1107]

As a test, I applied the JSON to the view formatting in the document library, and when I hovered over it, the custom card was displayed without any problems.

[XueSheng-GIT]

Probably related: #9868

If hover does not work at all, it helps most of the times to move the mouse to another list item and then back again to the previous hover area. But generally, hover is more or less broken with current list implementation!

[tpodugu-ms]

Thanks for reporting this. I will check with the team and update.