JSON Column link errors since SPO Fluent updates

[ian-custom365]

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
• [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

• browser version
• SPFx version
• Node.js version
• etc

Describe the bug / error

I see others commenting with other issues, so adding my experience here too. I have a simple list with a text column that has a url value. We had a simple icon and text string formatting allowing users to click and launch the link. Prior to the New List experience being rolled out to SharePoint this wasn't a problem. Now the icon and text don't launch the link, but clicking in the white space around the the cell does launch the link.

Previously the field looked like this:

I found a workaround by adding "txtContent": "Open Files", to top elm level which removes the icon and text and just hyperlinks the text.

So now with the field looking like this it works:

Below is the JSON, I've commented where I added the "txtContent": "Open Files",

{ "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json", "elmType": "a", //ADDING THIS ROW FIXES THE ISSUE
"txtContent": "Open Files", //But it should work without it. "attributes": { "href": "=if(@currentField=='','',@currentField", "class": "ms-fontColor-themePrimary ms-fontColor-themeDark--hover", "title": "='Open files" }, "style": { "text-decoration": "none" }, "children": [ { "elmType": "span", "attributes": { "iconName": "FileRequest" }, "style": { "padding-right": "4px" } }, { "elmType": "span", "txtContent": "=if(@currentField=='','','Open Files'" } ] }

Steps to reproduce

1. Create a text string column and populate it with a URL
2. Use the following JSON, which previously worked perfectly

{ "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json", "elmType": "a", "attributes": { "href": "=if(@currentField=='','',@currentField", "class": "ms-fontColor-themePrimary ms-fontColor-themeDark--hover", "title": "='Open files" }, "style": { "text-decoration": "none" }, "children": [ { "elmType": "span", "attributes": { "iconName": "FileRequest" }, "style": { "padding-right": "4px" } }, { "elmType": "span", "txtContent": "=if(@currentField=='','','Open Files'" } ] }

3. Then try clicking the link, it doesn't launch the URL when clicking on the text. But it does launch when clicking around the text - in the white space.

Expected behavior

I have other scenarios where we have used images rather than icons and they also don't launch the links, although hovering displays the URL.

[jgupta-msft]

@ian-custom365 : Sorry for responding later here, but i hope these issues have been fixed for you. Please let me know if you are still facing some issues.

[Ashlesha-MSFT]

Hello @ian-custom365, Thank you for bringing this issue to our attention. We will look into it and get back to you shortly.

[Ashlesha-MSFT]

@ian-custom365, I’ve tested the reported behavior using the provided JSON formatting, and everything is working as expected on my end. The link launches correctly when clicking on the text/icon, and no issues were observed across the tested browsers and environments.

Could you please confirm on your side as well, so we can proceed with closing the issue?

[Ashlesha-MSFT]

@ian-custom365, Just following up to check if there’s been any progress on this. Please let us know if anything is needed to move forward.

[Ashlesha-MSFT]

We are closing this issue for now. If the problem persists, feel free to reopen it or open a new one.