LivePersona does not show hover card

carrie-huynh commented 6 days ago

Version

[3.19.0]

SPFx version: 1.19.0

Expected / Desired Behavior / Question

LivePersona is expected to show the hover card when the control is hovered.

Observed Behavior

LivePersona does not show the hover card in SharePoint Online.

However if I add the People webpart on the same page and hover over that one first, then the LivePersona works as expected. It seems like the LivePersona does not initialize/load the hover card correctly?

Steps to Reproduce

Create an SPFx webpart and install @pnp/spfx-controls-react dependency
Import the control into your component:

import { LivePersona } from "@pnp/spfx-controls-react/lib/LivePersona";

Use the LivePersona control in your code as follows:

<LivePersona upn={userLogin}
  template={
    <>
      <Persona text={userDisplayName} coinSize={32} />
    </>
  }
 serviceScope={this.context.serviceScope}
/>

userLogin and userDisplayName are properties derived from this.context.pageContext.user

Either run your solution in a workbench or deploy it to your SharePoint environment.

LivePersona

github-actions[bot] commented 6 days ago

Thank you for submitting your first issue to this project.

wilecoyotegenius commented 6 days ago

Hi @carrie-huynh I have just build a web part according to your reproduce steps and all work fine for me: I didn't need to add any additional web parts to the workbench

carrie-huynh commented 4 days ago

Hi @wilecoyotegenius

Thank you for trying to reproduce the issue I'm having with the LivePersona control. Interesting that it worked for you but not for me.. I wondering what went wrong with my solution. Any ideas on how I can troubleshoot this?

wilecoyotegenius commented 4 days ago

Hi @carrie-huynh

As silly as it may sound, it could be your node.js version that causes problems.

I have used node 18.20.4. Try building your web part using the same node version as I have used (remember to remove node_modules and package-lock.json before rebuilding with new node).

Moreover, I had a similar issue when using Microsoft's Live Persona in the past (PnP's Live Persona control actually uses that OOTB Microsoft's component). My web part would not work when viewed in the workbench, but started working fine, when I packaged it and dropped into an app catalog. I didn't delve on that behavior back then, but maybe this trick will solve your issue as well.

If none of the above work, please check if there are any errors in developer tools console upon hovering/clicking on the persona control - they might provide us with an useful hint for further investigation.

carrie-huynh commented 2 days ago

Hi @wilecoyotegenius

I have tried the suggested actions but unfortunately it didn't solve the problem :(

And I don't see any errors in DevTools. Here is a screenshot of the console log. Anything that looks suspicious to you?

devtools

pnp / sp-dev-fx-controls-react