SPFx web part won't populate DOM (on first load) in Viva Connections Desktop

[poneilcsgp]

I've created a simple web part for use on our corporate intranet that uses react-autosuggest to provide suggested names (based on graph query of users) to pass to a search page (via querysting). The part works fine when the SharePoint site is loaded in the browser and if you view the site as a website tab in a Team.

We have used the Viva Connections Desktop app to make our intranet available from within teams. The issue is that the web part will not show the react-autosuggest suggestions after the page first loads, but if I click the "search button" the web part passes the search to the same page (via querystring params) and then the autosuggest works fine (until I leave the Viva Connections app and go to somewhere else in teams). The behavior is the same in the browser version of Teams. For some reason it just won't generate the DOM elements on first load (I have console logs showing me that the graph search is happening/data coming back).

Totally stumped on this one because it's really hard to test when it works everywhere except in Viva Connections app.

[ghost]

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

[patmill]

Have you set up any breakpoints to see where the issue is getting stalled? For example, you mention "it won't generate the DOM elements". What DOM element? Is it an extension placeholder? The webpart div? Is your render method getting called? Is your onInit function returning a promise that resolves?

[ghost]

This issue has been automatically marked as stale because it has marked as requiring author feedback but has not had any activity for 7 days. It will be closed if no further activity occurs within the next 7 days of this comment. Please see our wiki for more information: Issue List Labels: Needs Author Feedback & Issue List: No response from the original issue author

[poneilcsgp]

Sorry for the delay. I'm using the react-autosuggest component to provide autosuggest functionality when typing. After a set of suggestions is fetched it renders them in a DIV that's part of the autosuggest component. When loading on the SharePoint page directly in Chrome, edge, safari, etc. and typing in some text the graph api is called, returns results and I set them to the autosuggest state and the div is populated with the suggestions (by autosuggest). Running locally and testing in SPO workbench the component works fine.

In Teams with the Dev tools I can see that the graph api is called, but the div is not populated.

FWIW I've also tried to use the SPO workbench in teams (by using the Dev Tools to change window location) but even though standard webparts load fine these Webparts don't load at all. I'm not sure if Workbench in a Teams app is supposed to work, but I figured I'd give it a shot since getting representative testing locally would help a lot.

I'm back to this now and inserting a bunch of logging to see if I can figure out where it's not firing.

[patmill]

Where is the div for the autosuggest component located? Is it inside the webpart's div?

[poneilcsgp]

See attached. The suggestions that appear below the textbox in the 'react-autowhatever-1' div.

Div for the suggestions is right under the textbox. You can see in the (shadow) DOM:

When I do the same thing in Teams when the component loads without any other interaction, the suggestions html do not appear in the DIV, but if I do a Search (search button just redirects to the same page adding search values to query string parameters, the suggestions will start to appear. I was trying to figure out if it was a package size or lazy loading issue with Teams (where some code is forced to load when search button is clicked). As I mentioned earlier, works totally fine when accessed via browser directly in SharePoint.

[poneilcsgp]

Another followup. Since I couldn't get workbench testing to work in teams, I started debugging using this guidance: https://www.eliostruyf.com/testing-and-debugging-your-spfx-solutions-in-production-without-causing-any-impact/ by opening dev tools in Teams and doing window.location.href = window.location.href + '&loadSPFX=true&debugManifestsFile=https://localhost:4321/temp/manifests.js' from the DevTools console. This confirms that Autosuggest component doesn't fire the rendersuggestions when using the component in Teams.

It feels like I've got better ways to test, but I don't yet have insight into

1. Why it renderSuggestions doesn't run on first load in Viva Connections
2. Why it DOES work after the webpart does a simple redirect to the same page with some search results and then works fine on any page thereafter.
3. Why it has no issues in SP in browser.

[poneilcsgp]

Ok, I think I've got it figured out. Not 100% sure why it was ok in Browser or started working after first submit, but it looks like it was related to how what the state was being set to in instances when nothing was coming from query string params. I wrapped some additional logic around the first load and it appears to work in Teams and SP now. I'll update again if there's something that suggests otherwise. Thank you a ton for your assistance, helped me to re-scrutinize my code vs being confused by the Teams/Viva vs. Browser/SP scenario.

[patmill]

Great to hear you got it sorted.

[poneilcsgp]

Looks like I was wrong, it still doesn't work. The way I was testing had me believing I had resolved the issue but the way I was testing is another instance where the web part works (by loading it differently than Teams loads the landing page of Viva Connections desktop app). It's really tough to get a representative test/debug because of how Teams does framing and takes the destination page as a parameter of teamslogon.aspx. This is what I have so far:

The web part works with no issues when I load Dev Tools (Teams webview) and then put this in the console (bolded attempts to load SPFx local debugging):

let frameElement = document.getElementById('extension-tab-frame'); frameElement.src = https://mytenant.sharepoint.com/_layouts/15/teamslogon.aspx?spfx=true&dest=https%3A%2F%2Fmytenant.sharepoint.com%2Fsitepages%2FEmployee-Search-v5.aspx**%3FloadSPFX%3Dtrue%26debugManifestsFile%3Dhttps%3A%2F%2Flocalhost%3A4321%2Ftemp%2Fmanifests.js**

But this isn't how Teams creates the above src. Instead it uses https://myTenant.sharepoint.com/_layouts/15/teamslogon.aspx?spfx=true&vivaconnections=true

With this link it doesn't appear that you can explicitly set the destination/add SPFx debugging (which would make it a lot easier to walk through code) but I'll keep digging.

[poneilcsgp]

Another update. So breakpoints are tough because I can't get the localdev working with Viva Connections in the same way Viva loads the home site. But I was able to add some console.log statements to the code and deployed to a test site collections that i can navigate to using Viva Connections desktop in Teams. I put the log statements in my Autosuggest component's constructor and sure enough none of those logs appear when the component is loading. Now, once I force it to load by using the web part to do a redirect to my SharePoint search page, all the logs show.

Basically my observation is that when Viva Connections desktop loads, it loads the SharePoint site "differently" than when a page is loaded by, say, my web part redirecting using window.location = https://mytenant.sharepoint.com/sitepages/mySharePointPageWithWPOnIt.aspx

If this is correct, I don't think there's much I can do to force the page to load the way I need it to unless I can configure the start page for Viva Connections desktop to load a different URL that works better. Going to try this next and will update on any more insights.

[poneilcsgp]

I'm going to close this and reopen with a more accurate title/description of the problem.

[ghost]

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