Sp-dev-docs: When navigating from one folder to another, the navigatedEvent doesn't fire.

[dhruvp29]

Category

• [ ] Question
• [ ] Typo
• [x] Bug
• [ ] Additional article idea

Expected or Desired Behavior

When we navigate between the folders in document library then it should fire the navigatedEvent.

Observed Behavior

I have some logic based on which folder User is in. But it fails as when I navigates between the folder the navigatedEvent is not firing.

Steps to Reproduce

Go to Root Folder add some console and then navigate to any sub folder and write the querystring in console so you can check whether the event fired or not.

Here is the code snippet.

```
@override
public onInit(): Promise {
this.context.application.navigatedEvent.add(this, this._renderPlaceHolders);

  return Promise.resolve<void>();

}
private _renderPlaceHolders(): void {

let queryParms = new UrlQueryParameterCollection(window.location.href);
let myParm : string = decodeURIComponent(queryParms.getValue("id"));
console.log("QUery String: " + myParm);

console.log("HelloWorldApplicationCustomizer._renderPlaceHolders()");
console.log(
  "Available placeholders: ",
  this.context.placeholderProvider.placeholderNames
    .map(name => PlaceholderName[name])
    .join(", ")
);

// Handling the top placeholder
 {
  const topPlaceholder  = this.context.placeholderProvider.tryCreateContent(
    PlaceholderName.Top,
    { onDispose: this._onDispose }
  );

  // The extension should not assume that the expected placeholder is available.
  if (!topPlaceholder) {
    console.error("The expected placeholder (Top) was not found.");
    return;
  }

  if (this.properties) {
    let topString: string = this.properties.Top;
    if (!topString) {
      topString = "(Top property was not defined.)";
    }

    if (topPlaceholder.domElement) {
      topPlaceholder.domElement.innerHTML = `
      <div class="${styles.app}">
        <div class="${styles.top}">
          <i class="ms-Icon ms-Icon--Info" aria-hidden="true"></i> ${escape(
            topString
          )}
        </div>
      </div>`;
    }
  }
}

// Handling the bottom placeholder

{
const bottomPlaceholder = this.context.placeholderProvider.tryCreateContent(
PlaceholderName.Bottom,
{ onDispose: this._onDispose }
);

  // The extension should not assume that the expected placeholder is available.
  if (!bottomPlaceholder) {
    console.error("The expected placeholder (Bottom) was not found.");
    return;
  }

  if (this.properties) {
    let bottomString: string = this.properties.Bottom;
    if (!bottomString) {
      bottomString = "(Bottom property was not defined.)";
    }

    if (bottomPlaceholder.domElement) {
      bottomPlaceholder.domElement.innerHTML = `
      <div class="${styles.app}">
        <div class="${styles.bottom}">
          <i class="ms-Icon ms-Icon--Info" aria-hidden="true"></i> ${escape(
            bottomString
          )}
        </div>
      </div>`;
    }
  }
}

}
```
I already checked #1254 which states the issue if fixed but I am still facing this issue.

[msft-github-bot]

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

[andrewconnell]

Please provide all the helpful context... SharePoint environment+version, SPFx version, browsers tested, etc.

Also, what's the first issue in reference to in the post? Unclear...

[dhruvp29]

@andrewconnell the first issue was added by mistake.
Environment details:
SharePoint Environment - SharePoint Online
Version - vti_extenderversion:SR|16.0.0.19221
SPFx Version - tried with 1.9.1 and 1.8.2 both
Browser tested - chrome

[holylander]

If helps, I also found the same issue. I had to modify an injected header by an app customizer extension that is used when browsing through the folders of a list. I managed to troubleshoot the issue using the mutationObserver and the builtin list breadcrumb

[dhruvp29]

@holylander can you please provide some more details how you used the builtin list breadcrumb for troubleshooting?

[dhruvp29]

@andrewconnell any update on this issue?

[andrewconnell]

The navigation event has been tricky for many people. I haven't had time to work through your specific scenario. However, are some links to some popular posts that address the issue. They may help... can you take a look and see if they do?

• https://julieturner.net/2019/09/sharepoint-framework-application-customizer-cross-site-page-loading/
• https://blog.velingeorgiev.com/page-hit-when-SPA-page-transitioning-modern-sharepoint-sites
• https://www.eliostruyf.com/handling-navigation-in-a-sharepoint-framework-application-customizer/
• https://www.eliostruyf.com/things-to-check-in-your-spfx-application-customizer-after-page-transitions/

[dhruvp29]

@andrewconnell Thanks for the feedback. I will look into the references and check if it solves the issue or not.

[dhruvp29]

hi @andrewconnell , I tried the URL mentioned above but none of the solution solve my issue.
In the above URL they have the solution when the user navigates between different pages but in my case it is the navigation between the folders of same document library.

[andrewconnell]

Can you provide a working sample (_link to public GH repo_) to help repro the issue?

[dhruvp29]

Hi @andrewconnell , Here the link to the working sample.

kindly let me know if you require more information from my end.

[dhruvp29]

Hi @andrewconnell , Did you get a chance to look into above?

[dhruvp29]

Hi @andrewconnell, Is there any update on this?

[andrewconnell]

There are multiple issues that all seem to be related (#3236, #3836, #4054, #4191, #4557)... seems MSFT is aware and is working on it...

[cmzaragoza]

Hello @andrewconnell. Do you know is there is any update regarding this issue in last SPFx 1.10 version?

[holylander]

Hi there, as far as I know, there is no way to track the discussed navigation event.

The only effective solution is to track down the url changes during conditional page load ( no full page load ) following the guide from microsoft.

On the other hand, I have created this small spfx extension that tracks the url changes on conditional page load or sharepoint page transition, which uses the previous approach and exposes such info as a dynamic data source, maybe it could be helpful for someone else.