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

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