react-page-sections-navigation - Anchor labels not showing in top navigation bar on page load.

[stchiew]

react-page-sections-navigation

Authors

@AJIXuMuK

Expected or Desired Behavior

All labels defined in the anchor webparts in the page are displayed in the top navigation bar.

Observed Behavior

Only the Home label is display upon page load. Only after scrolling down the page, the anchor labels will start to appear on the top navigation bar

Steps to Reproduce

Steps to reproduce the behavior:

1. Deploy the web part
2. Add the web parts and add the anchor web parts.
3. Save and load the page. The top navi bar displays only the Home label.
4. Scroll down the page and other anchor labels then start to appear.

Environment Details (Development & Target environment)

• OS: Windows 10
• Target Environment: SharePoint Online
• Framework: Node.js /v10
• Browser(s): All
• Tooling: VS Code | SPFx v1.10.0
• Additional details:

Additional context

Seems like only when the anchor web parts come into view port only does the labels appear in the top navigation bar

[ghost]

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

[stchiew]

A little deep dive into this. Seems like the implementation of lazy loading of custom web parts in modern pages messes this up. The anchor web parts (data sources) located further down the page is not rendered until scrolled to, so the destination web part (nav header) does not have all the anchor text/links yet to display when the page is first opened. Only when scrolled to does the anchor web parts get rendered and the text/links are sent to the destination web part. This was tested on both Targeted and Standard release tenants.

Anyway (via code) of forcing the data sources to be rendered before being scrolled to?

Below are some images from Chrome dev tool before and after the anchor web parts come into view. Tested with a standard HellowWorld webpart as well with similar results.

Before - web part not rendered

After webpart rendered

Standard Hello World webpart at bottom of a long page- it is not rendered on page load

[AJIXuMuK]

I don't think we can fix it on web part's level. So I submitted a bug to sp-dev-docs.

[JaggB]

Seems like this has broken for us too. Was working a few days ago. The Navigation Position: Top of Page Content doesn't work but Inside Section does work:

Top of page

Inside section

[AJIXuMuK]

@JaggB - please see the referenced issue

[stchiew]

@JaggB encountering your issue too, but seems to be caused by a different change. Some class names have changed in the modern page rendering, to something like div class="st_bv_k"><div class="ri_bm_k"> ...etc
The query selector looking for class*="layoutWrapper_"] classes can't find it anymore for top of page positions, so top of page nav bar doesn't show up anymore.

Inside section still works because spPageCanvasContent is still there.

Question is, is this a temp change by MS for some testing purpose, or a longer term change...

---code reference ---
// page canvas DOM element id
private readonly _pageCanvasId = 'spPageCanvasContent';
// page layout element selector
private readonly pageLayoutSelector = '[class*="layoutWrapper"]';

[KrutinP]

I am facing a similar problem.

I am using connected webparts to dynamically populate multiple custom chart webparts based upon data range selected in the top range selection custom webpart. Due to Lazy Loading of SPFx web part, unless we scroll to the bottom of the page and let all the custom webparts load, the charts fail to render itself with the data range selected.

Will lazy Loading of SPFx cutom webparts handle problems faced in using connected webparts on same modern page

[hugoabernier]

Closing this issue as "won't fix" because the functionality relies on system behavior that has changed.

See this issue 6091 for more information.