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