Prevent the Angular scLink directive from adding an empty href attribute

[callmeaponte]

Is your feature request related to a problem? Please describe.

The *scLink directive adds an href attribute, even if the link data (from the JSS JSON) is empty:

{
    "fields": {
        "HeadingText": {
            value: "Hello World"
        },

        "HeadingLink": {
            "value": {
                "href": "",
                "text": "",
                "linktype": "",
                "url": "",
                "anchor": "",
                "title": "",
                "target": "",
            }
        }
    }
}

<!-- input -->
<a *scLink="HeadingLink">
    <h3>{{ HeadingText.value }}</h3>
</a>

<!-- expected output -->
<a>
    <h3>Hello World</h3>
</a>

<!-- actual output -->
<a href>
    <h3>Hello World</h3>
</a>

This causes a few issues:

1. Links with an empty href attribute still display a pointer icon on hover, indicating to users that it is clickable - when it is not.
2. We have to write a bunch of boilerplate code (see below) to accommodate situations where a content author may, or may not, want to make an element linkable in Sitecore.
3. In terms of accessibility, having an empty href is worse than omitting it.

To elaborate on point #2 (boilerplate code), the sample JSS JSON above represents a Sitecore content item that lets users specify a heading, and also to (optionally) wrap that heading in a link if they wanted to. Currently, the markup we need to write to support this on the front-end is as follows:

<ng-template [ngIf]="HeadingLink.value.href">
    <a *scLink="HeadingLink">
        <h3>{{ HeadingText.value }}</h3>
    </a>
</ng-template>

<ng-template [ngIf]="!HeadingLink.value.href">
    <h3>{{ HeadingText.value }}</h3>
</ng-template>

... In contrast, it would be nice to be able to simply write:

<a *scLink="HeadingLink">
    <h3>{{ HeadingText.value }}</h3>
</a>

Describe the solution you'd like

It would be preferable to omit the attribute instead:

<!-- input -->
<a *scLink="someData"></a>

<!-- output -->
<a></a>

Describe alternatives you've considered

The alternative is to use the boilerplate code displayed above. However this is not ideal, especially when you have to repeat that code for dozens and dozens of link-able elements across your code base.

Additional information

If you approve of this change in behavior then I can open up a PR, just let me know.

[sc-illiakovalenko]

@callmeaponte Can you provide me steps, how to setup field - where I'll get empty properties?
I don't know how to get same JSON as you provided

{
    "fields": {
        "HeadingText": {
            value: "Hello World"
        },

        "HeadingLink": {
            "value": {
                "href": "",
                "text": "",
                "linktype": "",
                "url": "",
                "anchor": "",
                "title": "",
                "target": "",
            }
        }
    }
}

[sc-illiakovalenko]

@callmeaponte I'm always getting such structure, when I try to save link with empty URL:

If I added new link field, i got:

myNewLink: {
    value: ""
},

I could not get same case, but with empty href, when import jss items, and set externalLink and delete href property

              externalLink:
                text: Link to Sitecore

Which version of Sitecore and JSS are you using?

[sc-illiakovalenko]

@callmeaponte Fixed in #406 . But if you can provide your steps - will be cool

[callmeaponte]

Thanks @sc-illiakovalenko! Answers to your questions below:

"Which version of Sitecore and JSS are you using?"
We're using Sitecore 9.3, although I'm not sure what JSS version is included with 9.3. And in our FE repo we're using version 13.0.2 of the @sitecore-jss/sitecore-jss package.

"Can you provide me steps, how to setup field - where I'll get empty properties?"
Click on the "View" tab in the ribbon toolbar, then check "Raw values". Now you can delete all of the text in the field.

... Speaking of, would it be too much to ask if you could extend your logic in #406 to treat http:// and https:// as "empty links" as well? Some of our content authors may not be aware that they will need to "view raw values" in order to successfully remove a link.

[sc-illiakovalenko]

@callmeaponte Thank you, yeah I have also noticed a problem related to http:// and https://. Agree, I'll work on it, I will create new issue

[sc-illiakovalenko]

@callmeaponte I created new one #408