SharePoint Online not respecting target="_blank" anymore?

[Nigel Witherdin]

Hi,

I have custom spfx webparts that have links in them which the users wish to be opened in a new tab when clicked. This was achieved using the typical target="blank" parameter, but just over the last week SharePoint modern pages now open these links in the same tab (previously they were opening in new tab as expected).

I have tried this with a anchors, and also using the Office Fabric Link component - same result.

Anyone know why, and how I can get these links to open in a new tab?

Also worth noting that the links to lists and libraries off the Site Contents page still open in a new tab - can I replicate this behaviour somehow??

Thanks!

[#2]

@Nigel Witherdin  I just tried and all look good for me. Make sure we use target="_blank"

public render(): void {

    this.domElement.innerHTML = `

      <div class="${ styles.helloWorld }">

        <a href="https://aka.ms/spfx" class="${ styles.title }" target="_blank">Click Here</a>

      </div>`;

  }

[#3]

@Vikram_Samal 

So strange - I am using:

<div class="ms-TooltipHost root-449">
<a target="_blank" href="https://scentregroup.sharepoint.com/sites/hrrefresh" class="ms-Link root-592" style="font-size: 17px;">HR</a>
</div>

and clicking the link is opening in the current tab.

And furthermore, the out of the box "News" webpart is opening clicked articles in the same window even though they have the target="_blank":

<a aria-label="Operating Capital Approvals launch Published by Nigel Witherdin on 27 June. Description: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ut viverra nunc. Sed tempus accumsan mi, vitae ultricies urna vulputate sit amet. Donec non molestie nisl, a ornare ipsum. Quisque id tristique neque. Nunc imperdiet felis nulla, nec…" data-automation-id="newsItemTitle" href="https://scentregroup.sharepoint.com/sites/technologyrefresh/SitePages/Operating-Capital-Approvals-launch.aspx" target="_blank" data-interception="propagate" class="text_title_d116a82a text_title-228 textListLayoutTitle_d116a82a" tabindex="-1">Operating Capital Approvals launch</a>

Maybe something else in my code base is affecting something??

[#4]

@Nigel Witherdin I stipped down all styling and tried still the same and opening in new tab. 

  public render(): void {
    this.domElement.innerHTML = `
      <div>
        <a target="_blank" href="<a href="https://aka.ms/spfx">Click" target="_blank">https://aka.ms/spfx">Click</a> Here</a>
      </div>`;
  }

Can you try with the different browser just to ensure no other issue.

[#5]

@Vikram_Samal 

Its happening in both IE and Chrome, and it is occurring on other sites in our tenancy (so not related to our custom code I guess).

I might have to involve Microsoft directly I guess....

[#6 · Accepted solution]

@Nigel Witherdin you need data-interception="off"

This is a very detailed post explaining the issue:

https://julieturner.net/2018/08/spfx-anchor-tags-hitting-the-target/

Hope this helps

[#7]

@Joel Rodrigues - Nailed it!

Thank you so much - adding the tag in resolved the issue, with the bonus that it doesnt really seem to add any extra processing time as Julie warns about in her post.

Thanks again!