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.

9
  • 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,
    – RussGove
    Commented Jun 15, 2017 at 1:33
  • may be related to github.com/OfficeDev/office-ui-fabric-react/issues/462
    – RussGove
    Commented Jun 15, 2017 at 1:40
  • Looks like React is forcing an iron chastity belt on you... stackoverflow.com/questions/41668430/… Commented Jun 15, 2017 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. Commented Jun 19, 2017 at 12:48
  • do you have an href='#' on the tag? can you share the code?
    – RussGove
    Commented Jun 20, 2017 at 22:05

1 Answer 1

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 and acknowledge you have read our privacy policy.

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