[BUG] PeoplePicker selectionMode="single"

[masashiswingle]

Describe the bug

The Peoplepicker will error when removing a single user when selectionMode="single".

I think the issue is when selectionMode is set to "single" and a person is selected, the input stops being rendered so you cannot select more people. When trying to remove a user, the removePerson handler is called where it tries to call this.input.focus() even though this.input = null. See screenshot for reference. The solution is to wrap this.input.focus in a null checker to make sure it is defined like other handlers.

To Reproduce
Steps to reproduce the behavior:

1. Render a PeoplePicker component with the prop selectionMode="single"
2. Add a person
3. Remove person
4. See error
   Unhandled Runtime Error
   TypeError: Cannot read properties of null (reading 'focus')

Call Stack
MgtPeoplePicker.removePerson
node_modules@microsoft\mgt-components\dist\es6\components\mgt-people-picker\mgt-people-picker.js (875:0)

Expected behavior
Remove person without erroring.

Screenshots

Environment (please complete the following information):

• OS: Windows 11
• Browser Chrome:latest
• Framework React
• Context Microsoft Teams
• Version
  "@microsoft/mgt-react": "2.7.1-preview.a5e3807",
  "@microsoft/mgt-teamsfx-provider": "2.7.1-preview.a5e3807",
  "@microsoft/microsoft-graph-client": "^3.0.2",
• Provider [e.g. Msal2Provider] (bonus if you share the provider config)

Additional context
Add any other context about the problem here.

[ghost]

Hello masashiswingle, 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 🙌

[musale]

Good catch @masashiswingle! I was able to reproduce this for teams-fx app. Would you be interested in making a fix for it?