[BUG] PeoplePicker inside a Fluent UI v9 Dialog cuts off suggestions.

[ThomasPe]

Describe the bug Using PeoplePicker inside a Fluent UI v9 Dialog cuts off suggestions.

I'm using MGT for React inside a Microsoft Teams app with Fluent UI v9 controls, which mostly works great. But Using the people picker the suggestions get cut off since a while - not sure if an update to Fluent UI or MGT started this issue.

To Reproduce Steps to reproduce the behavior:

1. Add Fluent UI V9 Dialog
2. Add PeoplePicker
3. Trigger auto complete / suggestions

Expected behavior The whole auto-complete / suggestions list should be visible

Screenshots

Environment (please complete the following information):

• OS: Windows
• Browser edge
• Framework react
• Context Microsoft Teams
• Version 3.1.3, @fluentui/react-components: 9.37.3

[gavinbarron]

Thanks for raising this @ThomasPe, we can't fix this directly, but we do have a fix for you.

The flyout that the suggestions are rendered in is positioned using position: fixed. This moves it outside of the document flow and thus it cannot contribute height/width to any containing elements.

The fix here is to add a class to the DialogSurface that unsets the contains CSS rule.

It so happens that we have this scenario in our react-contoso sample so I'm going to link the PR to fix that scenario to this issue.