Using <a> tag in SPFx Web Part causes the whole page re-rendered in modern site page

Question

We have a SPFx Web Part which uses the A tag with href='#' to create dropdown menus(clicking the tag shows a dropdown menu). The tag works well in a Classic page, however, when the Web Part is added to the new modern site page, clicking the tag will cause the Web Part re-rendered (the render() function of Web Part gets called).

This issue seems to be browser-related. It happens in IE 11 and Chrome, but not in Firefox 53.

To reproduce the issue with the Hello World Web Part, simply replace the render() function with following code:

public render(): void { 
    alert('render() called by clicking the A tag'); 
    this.domElement.innerHTML = '<a href="#" onclick="return false;">Click me</a>'; 
} 

The same issue was reported in Github (https://github.com/SharePoint/sp-dev-docs/issues/586), but not have an answer yet.

Any suggestions or workaround will be appreciated.

Again, I only see this issue happens on a SharePoint Online Modern page. It doesn't happen on the classic page, neither the Workbench page. I am able to reproduce it with IE and Chrome, not the Firefox.

Answer 1

Use like this document.getElementById("id").onclick = this.LikeClicked.bind(this);