LivePersona - completely breaks when a dialog is invoked from @microsoft/sp-dialog!

Category

[ ] Enhancement

[X] Bug

[ ] Question

Version

Please specify what version of the library you are using: [3.22.0]

Moreso, I am using SPFx 1.21.1 and @microsoft/sp-dialog 1.21.1.

Expected and Observed Behavior

Hi there. I'm using a LivePersona control to render user names in a dashboard so that everyone has access to their contact details.

Unfortunately, I have noticed that the LivePersona functionality completely breaks when a dialog is invoked from "@microsoft/sp-dialog". It breaks on either the first or second invocation, but it always happens and every subsequent re-render of any LivePersona controls still exhibit the same broken functionality.

Here's a dashboard being rendered with my name. On click, it correctly shows a persona card.

We have a framework from which we can invoke various dialogs built from @microsoft/sp-dialog. In this case, a "progress" dialog is shown.

As soon as a dialog is shown, the LivePersona breaks. Hovering and clicking the rendering template shows the following error in the console:

Steps to Reproduce

Above was just an example. I have tested on a "sandbox" test app with much simpler rendering and it's still the same:

1. Render a LivePersona on the page;
2. Invoke a dialog from the @microsoft/sp-dialog package. We have followed these steps found here which has been used forever in our framework: https://learn.microsoft.com/en-us/sharepoint/dev/spfx/extensions/guidance/using-custom-dialogs-with-spfx;
3. After the dialog is shown either the first or second time, LivePersona controls break with the errors in the console.

Reproduce the issue in the sandbox app by rendering LivePersona, then invoking a dialog through @microsoft/sp-dialog as described. Trace the LivePersona behavior after the first or second dialog invocation and use the reported console errors to identify the affected entry point; done means persona controls continue to work after dialogs are shown.