[BUG] People Picker flyout covers the input

[DigitalTechDreamer]

Describe the bug
Sometimes, when I click on the input of the People Picker component, the flyout covers the input. The position of the flyout is calculated incorrectly.

To Reproduce
The issue can be reproduced in the "Microsoft Graph Toolkit Playground" simply by clicking the input multiple times.
Link: https://mgt.dev/?path=/story/components-mgt-people-picker-properties--dynamic-group-id

Expected behavior
When the flyout appears, it doesn't cover the input.

Screenshots

Environment (please complete the following information):

• OS: MacOS, Windows
• Browser: Edge, Chrome
• Framework: None, React
• Context [e.g. Microsoft Teams, SharePoint, Office Add-ins, Web]
• Version 4.4, 4.5 and 4.6
• Provider [e.g. Msal2Provider] (bonus if you share the provider config)

Additional context
Add any other context about the problem here.

[caroefe17]

Hi team,

I just wanted to mention that I'm also experiencing the same issue with the People Picker component: the flyout sometimes appears on top of the input instead of below, which makes it quite difficult to use.

Would it be possible to get an update or any suggested workaround? This issue has a significant impact on the user experience.

Thanks in advance!