[BUG] PeoplePicker keeps loading when 'people' prop is provided and it receives focus

[DanielAvilaG]

Describe the bug If you provide the list of people via the people property, when the component gets focus it renders the loading card until the user types something. It also doesn't filter the options when typing in the input text.

To Reproduce

`const people: any[] = [{ id: "1", displayName: "Antonio", mail: "[email protected]", userPrincipalName: "[email protected]", imAddress: "[email protected]"

}, { id: "2", displayName: "Daniel", mail: "[email protected]", userPrincipalName: "[email protected]", imAddress: "[email protected]" }];`

<PeoplePicker people={people} selectionMode='single' />

Expected behavior The component should display the options upon focus and filter them as the user types.

Environment (please complete the following information):

• OS: [iOS, Windows]
• Browser [chrome, safari]
• Framework [react]
• Context [SharePoint]
• Version [2.4.0]
• Provider [e.g. Msal2Provider] (bonus if you share the provider config)

Additional context Examining the code, when the component receives focus, the _showLoading variable is activated. LoadState is then called which, in case the people prop is empty, uses graph to get the list of people and then disables _showLoading to display the results. But when people is not empty, _showLoading is not turned off. With the following change or similar the problem would be solved:

[ghost]

Hello DanielAvilaG, thank you for opening an issue with us!

I have automatically added a "needs triage" label to help get things started. Our team will analyze and investigate the issue, and escalate it to the relevant team if possible. Other community members may also look into the issue and provide feedback 🙌

[sebastienlevert]

Thanks for doing the investigation @DanielAvilaG! It seems you found a great solution! We welcome contribution and would love to feature your work in the Toolkit! Would you mind sending a PR for this scenario?

Thanks!