Closed poneilcsgp closed 2 years ago
Thank you for reporting this issue. We will be triaging your incoming issue as soon as possible.
@poneilcsgp - thanks for the updated issue/description. Could you please share your code with us so we could look into it? Thanks!
Employee.Search.zip attached, thanks for your help!
I've been digging in a little more on this. I've noted that debugging in the Teams web client provides clearer logging. I see that the constructor is firing but the react-autosuggest is not firing the renderSuggestion function. I'm looking into this now, may be related to the components ability to detect focus when in a frame.
Continuing to work through this by testing on Teams web client. I'm struggling to get the workbench to load the right code consistently Seems like it's holding on to a cached version. Any suggestions on how we can load the workbench in Teams or clear the web cache so it doesn't load old code? I've tried clearing local storage, browser data, etc. But it doesn't work consistently.
@poneilcsgp - I would recommend disabling cache in network tab and also "Bypass for network" for the Service workers in the application:
From other hand, I see the app is loading: I can see the search box. So it seems the problem is with the auto suggest component you're using inside your app, not SPFx itself. If you use PeoplePicker instead of your auto-suggest - will that work?
@poneilcsgp btw, not related to the issue, you're requestion Sites.All.Read
for "Microsoft.Graph". It should be "Microsoft Graph" (space instead of dot).
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
Hi Alex, Thanks. I believe that must have been a typo as graph calls are working. I am pretty sure my issue was/is related to the components ability to detect focus of an element in a frame. I have switched my autosuggest component to the Downshift (useComboBox) component and it works better, though onFocus still doesn't fire when loaded in Teams, so the suggestion div doesn't pop up when you focus on the input like it does when loaded into SharePoint.
Downshift claims to have a method to correct this by passing the correct window through the component properties, so I'm looking into that now.
From: Alex Terentiev @.> Sent: Tuesday, June 7, 2022 5:36 PM To: SharePoint/sp-dev-docs @.> Cc: Paul O'Neil @.>; Mention @.> Subject: Re: [SharePoint/sp-dev-docs] SPFx Web Part in Teams not working/events not firing? (Issue #8006)
EXTERNAL EMAIL
@poneilcsgphttps://nam04.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fponeilcsgp&data=05%7C01%7Cponeil%40costar.com%7Cdd1a5620f976413b144408da48cdc08f%7C9a64e7ca363f441c9aa74f85977c09f1%7C0%7C0%7C637902345783284604%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000%7C%7C%7C&sdata=pPKPkC2c%2FIN1p6FLet1iOqnlsAwcoZ89V4WxSkV4FrM%3D&reserved=0 btw, not related to the issue, you're requestion Sites.All.Read for "Microsoft.Graph". It should be "Microsoft Graph" (space instead of dot).
- Reply to this email directly, view it on GitHubhttps://nam04.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2FSharePoint%2Fsp-dev-docs%2Fissues%2F8006%23issuecomment-1149192765&data=05%7C01%7Cponeil%40costar.com%7Cdd1a5620f976413b144408da48cdc08f%7C9a64e7ca363f441c9aa74f85977c09f1%7C0%7C0%7C637902345783284604%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000%7C%7C%7C&sdata=2nRvOsmg5Jqy3AQV5Szg4tg5fGWlkJvr3ZtJOv5ZECo%3D&reserved=0, or unsubscribehttps://nam04.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fnotifications%2Funsubscribe-auth%2FAY7OEIVCDVK5XN7A6QUJIJTVN66E7ANCNFSM5XRU3YBA&data=05%7C01%7Cponeil%40costar.com%7Cdd1a5620f976413b144408da48cdc08f%7C9a64e7ca363f441c9aa74f85977c09f1%7C0%7C0%7C637902345783284604%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000%7C%7C%7C&sdata=KRbs2tywAQ56jwe1QsiPg2Ldvy%2Fn5QjboUq66Cze1%2Fw%3D&reserved=0. You are receiving this because you were mentioned.Message ID: @.**@.>>
Closing as it doesn't seem to be an SPFx error.
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
Target SharePoint environment
SharePoint Online
What SharePoint development model, framework, SDK or API is this about?
💥 SharePoint Framework
Developer environment
Windows
What browser(s) / client(s) have you tested
Additional environment details
browser version -- works in SharePoint on Edge Version 101.0.1210.53 (Official build) (64-bit) -- works in SharePoint on Chrome Version 102.0.5005.63 (Official Build) (64-bit) -- works in SharePoint on Safari 15.1 (17612.2.9.1.20) -- DOES NOT WORK in Teams (web version) on Edge, Chrome, or Safari (same ver as above) on initial load -- DOES NOT WORK in Teams Desktop Client on Mac on initial load -- DOES NOT WORK in Teams Desktop Client on PC on initial load
SPFx version: 1.13.1
Node.js version --14.9.2
Describe the bug / error
I've developed a webpart that is deployed to my Home Site's home page. The webpart works without issue when the page is loaded directly from SharePoint in all browsers tested (see browser info above).
The webpart provides an autosuggest textbox that queries graph for users that match the characters typed and shows the returned users as suggestions. It uses the React-Autosuggest as part of the solution. The react-autosuggest component is within a sub-component of my webpart because I re-use it as part of a "basic" webpart and an "advanced" webpart.
The issue that I'm seeing is that when I open Teams and load the page with the webpart on it (by opening the Teams Viva Connection app we've configured to show our intranet) and then begin typing I can see that the graph api is called and returns the proper results, but the suggestions do not load. I can observe that the
that the react-autosuggest doesn't appear. Further, I've inserted a bunch of console.log statements and it appears that my subcomponent (that contains react-autosuggest) never has it's constructor called. This issue does not happen when the page is loaded directly from SharePoint.- Do my console.logs go to a different console when using DevTools/Teams/Viva Connection (e.g. maybe my constructor is actually executing but I just don't see the log messages)?
- Am I suppposed to build/deploy my webpart differently for Viva Connections?
- Is it possible to use the hosted Workbench when testing Viva Connections?
- Load my webpart onto a page (I can share the WP code/package if it's helpful). There's nothing proprietary in it and works in my devTenant without any special reconfiguration.
- Test in SharePoint site, works.
- Set up Viva Connections app to point to Home Site and ensure my webpart is on the home page.
- Confirm that Suggestions don't appear, console logs don't appear.
Finally, If I use the search button in my component, which passes info to a search results page via query string as part of a window.location.href change, then the component starts to work as expected.
My observation is that it's the way that Teams loads viva connections that's making my part work differently, but when I do the page redirect (via window.location.href change) it loads the page differently.
I'm trying to dig in more because I still have the following unknowns:
Steps to reproduce
Expected behavior
I would expect that my webpart that works in SharePoint also works in Teams. I understand that there may be some additional configuration needed to deploy a part that works in Viva Connections, just not sure what that is.