2

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.

  • I think you may need to attach an event handler to the onClick that returns false to prevent the page from reloading. Are you sure you don't have that backwards, I would expect a classic page to reload, but not a modern page, – russellg Jun 15 '17 at 1:33
  • may be related to github.com/OfficeDev/office-ui-fabric-react/issues/462 – russellg Jun 15 '17 at 1:40
  • Looks like React is forcing an iron chastity belt on you... stackoverflow.com/questions/41668430/… – Danny '365CSI' Engelman Jun 15 '17 at 5:54
  • Thanks Russellg and Danny for your comments. Yes, the same code works in the Classic page, but not on the Modern page. I did try to add "return false;" to the onclick event with no luck. – Matthew Hong Jun 19 '17 at 12:48
  • do you have an href='#' on the tag? can you share the code? – russellg Jun 20 '17 at 22:05
0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.