SPFx: Click on anchor is not working as expected (event handler is not called)

I had a little problem in one of my SPFx based WebParts (App) that i'm currently developing. The App contains anchor links with an onClick event handler and an href-Attribute ... nothing special at all.

I used the following code in my React project:


  constructor(props: IReactDatatableProps) {
    this.loadFolder = this.loadFolder.bind(this);

Method code:

private loadFolder(e, item?) {    

Event binding

 <a target="_blank" href="..." onClick={this.loadFolder} {value.Folder.Name}</a>

In the local workbench the event handling works perfectly but after I put the App on a regular modern SharePoint page the event was not handled. Instead the link was opened. During a debug session I found out that the event handler it not called! The reason: A CROSS SITE LINK :-( 

When an anchor tag inside a SharePoint App contains a link to a different site the onClick event is not respected. To solve this issue you have to remove the href-Attribute or set the value to "#". Then the click-event is working as expected.

In case you want to keep the href-Attribute you can use the data attribute data-interception="off". This attribute managed the internal SharePoint page router logic. To disable the logic on a link set the attribute to OFF. For more information about the data attribute see: Hyperlinking considerations in SharePoint Framework

Happy coding :-)


Beliebte Posts aus diesem Blog

Exchange Online: Schutzregel für E-Mail Weiterleitung

EntityFrameworkCore.DbUpdateException: Could not save changes because the target table has database triggers. Please configure your entity type accordingly

Vertikaler Bereich deaktiviert