Forum Discussion
Nigel Witherdin
Sep 25, 2019Iron Contributor
SharePoint Online not respecting target="_blank" anymore?
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 l...
- Sep 26, 2019
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
Vikram_Samal
Sep 25, 2019Steel Contributor
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 }">
</div>`;
}
- Nigel WitherdinSep 25, 2019Iron Contributor
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??
- Vikram_SamalSep 25, 2019Steel Contributor
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.- Nigel WitherdinSep 25, 2019Iron Contributor
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....