Application Customizer rendering issue - components dplicates after navigation on the same site

[Saulius-Laurinaitis]

Category

• Question
• Typo
• Bug
• Additional article idea

Expected or Desired Behavior

Top Application customizer render once when navigating on all locations

Observed Behavior

It started yesterday (15/03/2018) on my few tenants which does not have early release enabled, but everything is good for early release enabled tenants. I noticed my existing application customizers (top placeholders keeping top navigation) are added again when navigating on the same site different pages or every second time between sites.

I had to add a code to check if that was not yet added:

let ph = this.context.placeholderProvider.tryCreateContent(placeholderName, { onDispose: this._onDispose });
if (ph.domElement.parentElement.getElementsByClassName("my-extension").length) {
return;
}

Steps to Reproduce

• Deploy application customizer top placeholder and try navigate on the same site.

Thanks

Saulius

[rbarten]

We have the same issue!

[pdemro]

We started noticing this today 2018-03-14. Can confirm at least one Targeted-Release tenant seems to be working normally, and one Standard Release tenant is having the duplicating extension issue

[VelinGeorgiev]

Well, this is our production environment. Not sure what to tell my product owner :) :) :) .

Same with me. Targeted release works. PRODUCTION Fails.

[phawrylak]

I had similar problem. The best solution for now is to check whether it's already added before adding. It should be definitely fixed in SPFx.

[VelinGeorgiev]

@phawrylak that is a good suggestion, but we need generalized stable solution from Microsoft. We have 10-13 customizes running in PROD .. cannot quickly fix that.

[patmill]

Is this happening only on Pages, or on Lists/Libraries as well? Also, can you share what method you are creating your placeholder in?

[patrickabel]

I am seeing this issue as well. Similar to @VelinGeorgiev, this is working fine in targeted release and failing (creating duplications) in production.

@phawrylak can you provide an example of how you're working around this bug currently?

[patmill]

Working on a solution.

[VelinGeorgiev]

@patmill , this is how we usually init react components in application customizer, but seems to be the recommended way.

export default class PlacesApplicationCustomizer
  extends BaseApplicationCustomizer<IPlacesApplicationCustomizerProperties> {

  @override
  public onInit(): Promise<void> {
    Log.info(LOG_SOURCE, `Initialized ${strings.Title}`);

    let placeholder: PlaceholderContent;
    placeholder = this.context.placeholderProvider.tryCreateContent(PlaceholderName.Top);

    const element: React.ReactElement<IPlacesProps> = React.createElement(
      Places,
      {
        ...
      } as IPlacesProps
    );
    // render the react element in the top placeholder.
    ReactDom.render(element, placeholder.domElement);

    return Promise.resolve();
  }

[patrickabel]

My client is seeing this resolved in their production tenant this morning. They're also seeing some new features previously in targeted release like the new waffle so perhaps a fix got pushed over night?

[pdemro]

This seems to be resolved for my Standard Release tenants today 03-15-2018

[guillaume-kizilian]

Indeed, it is solved.
However, header and footer are no longer refreshed.
Meaning : If you have a footer which appears on click, it will stay open if you navigate to another page on the site, but will disappear if navigate to the same page or another site.

Hopefully, navigated events will be fix too.

[GrahamMcMynn]

We have rolled back to a previous build and are making a fix for the root cause of the issue. Please let us know if you continue to see this issue.

[patrickabel]

@mcmynn83 I have a client reporting that the application customizer issue is back again this morning in their production tenant. Did the build with the bug get pushed out again prior to being fixed?

@VesaJuvonen @rmillener

[VesaJuvonen]

We have potential regression on this and are working on getting it resolved.

[patrickabel]

@VesaJuvonen what's the status on this issue?

[ghost]

FYI we have been seeing this issue, but infrequently. We were able to reproduce sporadically by initializing a partial navigation from one site to another then clicking back/forward on the browser until it pops up. Often this will be reproduced within a minute or two. Our footer did not have this issue however we had quite a bit of loading within our header which may have contributed to this.

We implemented a similar solution to Saulius-Laurinaitis in order to work around the bug (setting an ID on the domElement as well as verifying one doesn't already exist).

[msft-github-bot]

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