Sp-dev-docs: BUG: Using <a /> tag causing whole webpart to be re-rendered in modern site page

Created on 11 May 2017 · 16Comments · Source: SharePoint/sp-dev-docs

Most helpful comment

Hi @shaipetel, @matthong

thanx for reporting the issue and apologies for a delayed response. We have identified a potential issue in our code and will try to provide a fix soon. Once that fix ships, most likely this issue should go away.

regards

manishgarg1 on 18 Jul 2017

👍3

All 16 comments

Have you tried to override the onClick event, because even when you don't have an onClick handler attached the browser by default hast on.

Haven't tried it myself but looks a bit strange.

StfBauer on 11 May 2017

@StfBauer Sorry for the delay, yes I did tried to to override using event.preventDefault()and event.stopPropagation(). It still re-render the whole webpart.

jonathanhotono on 24 May 2017

I have noticed the same behavior. This is particularly an issue when using third party components that render tags which you have no control over.

Paul-Colucci on 30 May 2017

We are facing the same problem when using a 3rd party library which uses " href='#' " for dropdown menus. Any idea when the bug can be fixed?
Is there a workaround for this issue?

matthong on 1 Jun 2017

Fyi @iclanton @VesaJuvonen .
This probably isn't an issue with spfx and probably with the o365 modern page bug. Not sure where else to report this bug.

jonathanhotono on 6 Jun 2017

Seems that the issue happens in IE 11 and Chrome, but not in Firefox. Post a question to StackExchange: https://sharepoint.stackexchange.com/questions/218265/using-a-tag-in-spfx-web-part-causes-the-whole-page-re-rendered-in-modern-site

matthong on 15 Jun 2017

@matthong thanks, it seems that the description is a bit different to the issue that i addressed. This only applies on modern pages where any tag click with or without href will re-render the whole webpart (or recall the render method in xxxWebPart.ts) without refreshing the page. I will make a sample project with debugger and clear comments to demonstrate the issue soon.

jonathanhotono on 17 Jun 2017

In my case, it is all about the number sign "#". If I remove the "#" from 'href="#"', then everything works, the re-rendering doesn't happen.

The issue can be reproduced with the following code in a Hello World Web Part

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

matthong on 22 Jun 2017

@patmill @VesaJuvonen Any chance we could get this triaged? Seems to be a pretty easy to repro, common problem.

CANUSA on 26 Jun 2017

I noticed the same issue, I had to modify an external library I was using to stop rendering a tags with href='#', I replaced it with href='javascript:' and it seemed to work.
Give it a try, although regardless this needs to be fixed.

I noticed it on classic web part pages, not only on modern so it is probably not the modern page that is causing this. Other non-SPFx web parts did not have this issue on the same page.

My web part was using knockout framework.

shaipetel on 18 Jul 2017

@shaipetel. Thanks for the suggestion. Unfortunately, we can't change the tag as it is rendered by a 3rd party component which we don't have control over.

matthong on 18 Jul 2017

👍1

well then, good luck. I reported this several months ago and got no feedback so I couldn't wait on our release to production date, I had to create a copy of that library and changed it to work.

Hopefully this will get fixed this time around, seems to be getting more attention this time. It is a very big issue IMHO. I'll keep following this thread.

shaipetel on 18 Jul 2017

Hi @shaipetel, @matthong

regards

manishgarg1 on 18 Jul 2017

👍3

That will be great! Thank you @manishgarg1.

matthong on 18 Jul 2017

I can confirm this issue is now fixed. Closing the thread.

jonathanhotono on 22 Sep 2017

Issues that have been closed & had no follow-up activity for at least 7 days are automatically locked. Please refer to our wiki for more details, including how to remediate this action if you feel this was done prematurely or in error: Issue List: Our approach to locked issues