Sp-dev-docs: Left Navigation loading issue with SingleWebPartAppPage

[subhasishmukhopadhyay]

Category

• [x] Bug

Describe the bug

• Create a SingleWebPartAppPage and added SPFx Webpart.
• Using it in modern TeamSite template

• Clicking on some link in the webpart when loading any URL the left navigation in Chrome is showing "Loading..." many times and nothing happens in left nav. It is working fine in IE / Edge. This problem started happening since last few days only. So existing running apps are also getting affected.

• OS: Windows 10

• Framework: [SPFx]
• Browser(s): [Chrome]
• Tooling: [e.g. VS Code, SPFx]
  

[msft-github-bot]

Thank you for reporting this issue. We will be triaging your incoming issue as soon as possible.

[andrewconnell]

Unable to repro this... can you please provide more context & more detailed steps to repro?

[msft-github-bot]

The more context details you can provide, the easier it is to help assist on issues. Any code you can provide and/or screenshots of the issue also help. The easier you can make it to reproduce the issue, the easier and quicker it is for someone to help you. Please refer to How to Create Good Issues, specifically How to Create Good Issues: Include context, in our wiki for more details.

[ikmoss]

@andrewconnell this is somewhat similar behaviour I have observed earlier. There's a problem with loading SPFX webpart in Single page webpart layout. You can reproduce it by adding two SPFX webpart pages from create a new page screen. Click the link on left hand navigation, the page with a SPFX webpart loads fine but when you click the other link, the page doesn't refresh but shows the same SPFX webpart of the previous page. Here's the link to the related issue. Now the issues is available in production https://github.com/SharePoint/sp-dev-docs/issues/5211

[subhasishmukhopadhyay]

Unable to repro this... can you please provide more context & more detailed steps to repro?

I have added the screen shot; please see it above.

[ng-marcus]

This is causing much difficulty with our customers - we've had to put out a support bulletin telling them to click the links twice to navigate. Is there any acknowledgment of this issue yet?

[subhasishmukhopadhyay]

This is causing much difficulty with our customers - we've had to put out a support bulletin telling them to click the links twice to navigate. Is there any acknowledgment of this issue yet?

Now the similar issue is happening for us as well. It was perfect couple of weeks before also.

[andrewconnell]

@ng-marcus said:

Is there any acknowledgment of this issue yet?

Yup... I've alerted SP engineering.

[subhasishmukhopadhyay]

any target date to fix this please?

[subhasishmukhopadhyay]

Why is this marked as closed????

[PrasadKasireddy]

This request is still open, there is one more newly created duplicate incident is closed.

[subhasishmukhopadhyay]

Can you please share the any duplicate incident link as I need to follow up and answer to client?

[andrewconnell]

@subhasishmukhopadhyay look at the timeline of this issue... related issues are added to the timeline as mentions.

[justatheory]

I get the the same issue navigating between client side pages that have had their layout type set to SingleWebPartAppPage.

[subhasishmukhopadhyay]

Do you have any further update please?

[MRuimerman]

Probably also related to this one: https://github.com/SharePoint/sp-dev-docs/issues/4975
You need to click twice when you navigate back from the OOB events page to a Single part app page to get the content loaded.

[MichalSeverin]

So many issues with same problem:
https://github.com/SharePoint/sp-dev-docs/issues/2398
https://github.com/SharePoint/sp-dev-docs/issues/4975
https://github.com/SharePoint/sp-dev-docs/issues/5211
https://github.com/SharePoint/sp-dev-docs/issues/5227
https://github.com/SharePoint/sp-dev-docs/issues/5235
https://github.com/SharePoint/sp-dev-docs/issues/5352
https://github.com/SharePoint/sp-dev-docs/issues/5448

And no relevant answer.

Please, is it possible to fix this?

[subhasishmukhopadhyay]

So many issues with same problem:

2398

4975

5211

5227

5235

5352

5448

And no relevant answer.

Please, is it possible to fix this?

We truly need solution for this....

[hoangbaophu89]

Temporary solution. Put it into your webpart.

[subhasishmukhopadhyay]

As Array.from is not working so I have changed a little bit and added. But no change in that. All links in the page and left nav needs to click twice.

var elements = document.getElementsByClassName('ms-HorizontalNavItem-link');
var elementsArray: any[] = [];
Array.prototype.forEach.call(elements, (el) => {
elementsArray.push(el.tagName);
});

elementsArray.map(
x => {
x.setAttribute("data-interception", "off");
}
);

[hoangbaophu89]

Hi please try this class "ms-Nav-link".

var elements = document.getElementsByClassName('ms-Nav-link');

//sorry ms-HorizontalNavItem-link is top navigation

[subhasishmukhopadhyay]

Getting the error "TypeError: Object doesn't support property or method 'setAttribute'" in browser console and no page is loading so I have reverted the changes.

[subhasishmukhopadhyay]

Is there any plan to fix it and any deadline please? ... it is almost 2 months since the issue was reported

[alexliangxy]

Is there any plans to fix this please?

[mahesh2005]

Any updates on this issue, we are seeing this issue as well? any workarounds?

[subhasishmukhopadhyay]

Any plan to fix it? Why no comment since long and no update on this?

[trey-miller]

The above workaround can only partially address the issue, mainly due to the selector not targeting all possible link elements on the page. It also can't fix links that aren't yet there when the web part loads, such as the side menu navigation when it is collapsed due to the smaller screen width breakpoint. The links only exist when that is opened, and destroyed for brand new instances the next time. These transient anchor elements can be targeted with polling or mutation observers, but that comes with negative performance considerations.

We are also concerned about needing to apply a hack on the page to fix this SharePoint bug, and the possibility that our fix will conflict with the official fix from Microsoft whenever that finally comes. It seems SPFx overall is meant to address developers making too many modifications to native SharePoint elements, by providing official sanctioned outlets for customization. But issues like this, where the only workaround is to modify native SharePoint elements, sort of conflict with that point.

Our customers are instructed to report the issue for their tenants through normal support channels. Hopefully we will see progress soon. Thank you!

[lucabandMSFT]

folks, I just tried to repro this with the Leads app from PnP Samples and it does not repro. Do you have an environment I can take a look at or a solution you can share where the problem reproes constantly?

[ng-marcus]

Hey Luca. Our app isn't open source, but happy to assign you an account in our dev tenancy and give you access to it if that helps you work on this. Ping me if that would be useful.

[trey-miller]

Thanks Luca. Maybe it's a bit chaotic to track the actual problem, as there are several github issues all related to this. It's possible a related issue mentioned above would have been more appropriate for me have commented on.

The key to repro for me is navigation from one single part app page to another single part app page, using a single click on an anchor element that does not have the data-interception="off" attribute. It doesn't seem to have the problem when navigating between a single part app page and a regular site page.

[ikmoss]

I have opened Premier with MS Case #:20221834. They have reproduced in their test environment and the engineer is working with product team to solve this issue. I hope we can get the fix soon.