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

tecchan1107 commented 3 months ago

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.

newer

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

older

Steps to reproduce

Create a list
Create some items
Format the view with the following JSON

JSON of view formatting

``` json { "$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" } ] } ] } ] } ] } } ```

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 commented 3 months ago

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

patrikhellgren commented 3 months ago

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 commented 3 months ago

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.