List Formatting: Clicking on a child element of the `a` element does not open the linked site in the newer? Microsoft Lists

[tecchan1107]

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

No response

Describe the bug / error

In the newer? Microsoft Lists, clicking on a child element of the a element does not open the linked site.

In the older? Microsoft Lists, clicking on a child of the a element opens the linked site.

Steps to reproduce

1. Create a list
2. Create some items
3. Format the view with the following JSON

JSON of view formatting

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/row-formatting.schema.json",
  "hideSelection": true,
  "hideColumnHeader": true,
  "rowFormatter": {
    "elmType": "div",
    "children": [
      {
        "elmType": "div",
        "style": {
          "font-size": "20px"
        },
        "children": [
          {
            "elmType": "div",
            "txtContent": "↓ a element"
          },
          {
            "elmType": "a",
            "style": {
              "display": "flex",
              "justify-content": "center",
              "align-items": "center",
              "width": "500px",
              "height": "300px",
              "margin": "10px"
            },
            "attributes": {
              "href": "https://learn.microsoft.com/en-us/sharepoint/dev/declarative-customization/formatting-syntax-reference",
              "target": "_blank",
              "class": "ms-bgColor-communicationTint20 ms-bgColor-communicationTint10--hover"
            },
            "children": [
              {
                "elmType": "div",
                "style": {
                  "display": "flex",
                  "justify-content": "center",
                  "align-items": "center",
                  "width": "50%",
                  "height": "50%"
                },
                "attributes": {
                  "class": "ms-bgColor-sharedOrange10 ms-bgColor-sharedOrange20--hover"
                },
                "children": [
                  {
                    "elmType": "span",
                    "attributes": {
                      "iconName": "Link"
                    }
                  },
                  {
                    "elmType": "span",
                    "txtContent": "child element"
                  }
                ]
              }
            ]
          }
        ]
      }
    ]
  }
}

4. Click on the parent or child element of the displayed link

Expected behavior

Clicking on a child element of the a element opens the linked site.

[tecchan1107]

Perhaps this is occurring only in the list view. In the gallery view, this phenomenon did not occur.

[patrikhellgren]

I have been seeing the same thing the last week or so.

Using this json to display a button in a column that links to another page:

{
    "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
    "elmType": "div",
    "children": [
        {
            "elmType": "a",
            "attributes": {
                "class": "ms-fontColor-themePrimary ms-fontColor-themeDarker--hover",
                "href": "='https://contoso.sharepoint.com/sites/TestSite1/Lists/TestList1/AllItems.aspx?FilterField1=field1&FilterType1=Lookup&viewid=fb0fb875%2D5e69%2D4ef1%2Da68d%2D919bc53d1f44&FilterValue1=' + [$Title]"
            },
            "style": {
                "border": "none",
                "background-color": "transparent",
                "cursor": "pointer",
                "font-size": "12px"
            },
            "children": [
                {
                    "elmType": "span",
                    "attributes": {
                        "iconName": "FullHistory",
                        "title": "Show history"
                    },
                    "style": {
                        "padding-right": "6px"
                    }
                }
            ]
        }
    ]
}

This was working a week or so ago but had stopped working sometime during this last week.

Changing it to the following got it working again so my feeling is the same as yours that without child elements it seems to be working.

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
  "elmType": "div",
  "children": [
    {
      "elmType": "a",
      "attributes": {
        "class": "ms-fontColor-themePrimary ms-fontColor-themeDarker--hover",
        "iconName": "FullHistory",
        "title": "Show history",
        "href": "='https://arcticfalls.sharepoint.com/sites/Egenkontroller-dev/Lists/Utfrda%20Egenkontroller/AllItems.aspx?FilterField1=afacObjectLookup&FilterType1=Lookup&viewid=fb0fb875%2D5e69%2D4ef1%2Da68d%2D919bc53d1f33&FilterValue1=' + [$Title]"
      },
      "style": {
        "text-decoration": "none",
        "border": "none",
        "background-color": "transparent",
        "padding-left": "15px",
        "padding-right": "6px",
        "cursor": "pointer",
        "font-size": "12px"
      }
    }
  ]
}

[ian-custom365]

Agree this is an issue and has been an issue for weeks - every tenant - and every user once the List App interface is deployed to SharePoint Lists it breaks any hyperlinked image field. Such as this one - which simply links to SPO Sites.

[tecchan1107]

I just checked and this problem has been resolved!

I also had no problems with the column formatting links.

I will close this issue as I believe the problem has been resolved.

Thanks for the fix @shagra-ms @arkogupta 🙇‍♂️!!

[tecchan1107]

I will mentions this to both of you who have had reactions on this thread and let you know. @Tanddant @Fedes365

[Tanddant]

Tagging @AlexanderHenkel cause I know he had some issues with this as well, but it seems to be working on my end

[AlexanderHenkel]

I can confirm that my formatted fields are working again, as intended

[Tanddant]

The issue is back on some of my tenants now 🙃

[tecchan1107]

Thanks for letting us know, Dan! This issue has recurred in my environment too...😔😔😔 I will reopen this Issue.

[tecchan1107]

I checked today and was able to open the link!

Therefore, I am closing this issue.