sp-dev-docs icon indicating copy to clipboard operation
sp-dev-docs copied to clipboard

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

Open tecchan1107 opened this issue 8 months ago • 3 comments

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

  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"
                  }
                ]
              }
            ]
          }
        ]
      }
    ]
  }
}
  1. Click on the parent or child element of the displayed link

image

Expected behavior

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

tecchan1107 avatar Jun 14 '24 01:06 tecchan1107