Nested markup on titles when "Use entity fields" unchecked

This issue still exists in version 5.x. I would consider this a major issue because as far as I can tell, there is no way around getting these nested anchor tags in the 5.x version. There is no longer a "Use entity fields" option in 5.x. The url is taken from the rendered title meaning you must select "link to entity" for the title to get a link...but then this creates nested links. So it's either no link or nested links.

This is a major issue because nested anchor tags are not allowed. See https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-a-e...

I am uploading a patch for 5.x that gets the url for the entity from the entity itself instead of getting it from the rendered title.

This is not the only way this could be fixed, but it's the easiest. Maybe a new setting could be added as suggested in #2972642: Link to entity should be a form setting option? Anyway, something must be done to fix this bug.

Thanks for the patch and investigation.

The nested link markup actually comes from the title. Therefore, we need to remove the link form the title markup.

Here is the patch to fix it for 5.x branch.

Attached the screenshot after removing the nested link.

Thanks for the quick reply, @Mingsong!

I think you have a good idea perhaps stripping anchor tags from the title. However, I still think getting the link url from the title is not the right way to go. The url should come directly from the entity itself like in my patch. This is a first step toward decoupling the model and the markup such that the url could be configured to come from another field as requested in other issues.

But maybe that's all a matter of tase. The more important thing is that while this patch fixes the nested anchor bug in the Monthly calendar views, your patch introduces a new bug into the List view. I can no longer get the List view to link to the content. It's because the href is being stripped from the title. Here's the markup of a List view entry after applying your patch:

<tr class="fc-list-item fc-has-url">
  <td class="fc-list-item-time fc-widget-content">09:16 am - 09:20 am</td>
  <td class="fc-list-item-marker fc-widget-content"><span class="fc-event-dot" style="background-color:#3a87ad"></span></td>
  <td class="fc-list-item-title fc-widget-content">July Event</td>
</tr>

When I click, I get this console error:

Uncaught TypeError: Cannot read property 'href' of null
    at HTMLTableRowElement.n.handleSegClick (http://unpkg.com/@fullcalendar/core@4.4.2/main.min.js:6)
    at HTMLDivElement.i (http://unpkg.com/@fullcalendar/core@4.4.2/main.min.js:6)

The fullcalendar js seems to be looking for an href somewhere in the list entry and it no longer finds it. I'm not familiar with the inner workings of the fullcalendar library but it seems strange that it wouldn't use the url value in drupalSettings to make the link in the List view the same way it does in the Monthly view. Instead it seems like the List view can only link to the content if the title is an anchor tag. This looks like a strange behavior of the library rather than a bug in the module. But I'm not sure.

Anyway, the point is the List view can't link to content with the new patch.

In case it helps, here's the json for this List entry as it appears in the html source. Note that the url is correct:

{\u0022title\u0022:\u0022July Event\u0022,\u0022id\u0022:\u00220-0\u0022,\u0022eid\u0022:\u0022105913\u0022,\u0022url\u0022:\u0022\\\/event\\\/july-event\u0022,\u0022des\u0022:\u0022\u0022,\u0022editable\u0022:false,\u0022start\u0022:\u00222020-07-27T10:16:00-04:00\u0022,\u0022end\u0022:\u00222020-07-27T10:20:04-04:00\u0022,\u0022backgroundColor\u0022:\u0022#3a87ad\u0022}

Good pick up.

Interestingly, I got the same error of 'TypeError: Cannot read property 'href' of null' with your patch #4.

Actually, path #4 didn't remove the nested anchor, but provides a way to have the entity link without ticking 'Link to the Content' for title filed.

The current 5.x is working without any error, but the nested anchor occurs.

Any suggestions are more than welcome.

Ok, I figure out a solution.

Based on my patch #6, I add following changes to fullcalendar_view.js to add the anchor for list view.

    // Event list tile html markup.
    let eventListTitleEle = info.el.getElementsByClassName('fc-list-item-title');
    if(eventListTitleEle.length > 0) {
      if (info.event.url) {
        eventListTitleEle[0].innerHTML = '<a href="' + info.event.url + '">' + info.event.title + '</a>';
      }
      else {
        eventListTitleEle[0].innerHTML = info.event.title;
      }
    }

We have to make sure a user is able to modify the link via the view field setting if needed.

Hi @Mingsong. You call out some important points.

Actually, path #4 didn't remove the nested anchor, but provides a way to have the entity link without ticking 'Link to the Content' for title filed.

Correct. It doesn't explicitly prevent the nested anchors, but it allows nested anchor to be easily avoided.

We have to make sure a user is able to modify the link via the view field setting if needed.

This is definitely a nice-to-have. The url can be "configured" currently by using replacement text in the title field in the View, but that's not too elegant. That should probably be done as part of another issue, maybe #2972642: Link to entity should be a form setting option or maybe a new one.

The patch in #10 works for my purposes in both Month and List views and it's more flexible than the patch in #4. I don't see any potential for unintended side-effects or any need for an update hook either. I'd say #10 is RTBC.