WinUI 3: AppBarButton's Flyout cannot be dismissed

[Kozmo (Junyi) Yi]

Describe the bug

In Win UI 3, the flyout of an AppBarButton is buggy after we clicked the button in the CommandBar overflow popup, the anomalies includes:

• light-dismiss overlay is not shown.
• AppBarButton's flyout cannot be closed
• AppBarButton's flyout is shown on the right instead of the bottom

In contrast, the behavior of the DropDownButton's flyout is normal.

Code used to reproduce the bug

<Window
    x:Class="WinUIBugRepro.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Grid>
        <CommandBar DefaultLabelPosition="Right">
            <AppBarButton Icon="SetLockScreen" Label="Test AppBarButton">
                <AppBarButton.Flyout>
                    <MenuFlyout LightDismissOverlayMode="On">
                        <ToggleMenuFlyoutItem Text="Item 1" />
                        <ToggleMenuFlyoutItem Text="Item 2" />
                    </MenuFlyout>
                </AppBarButton.Flyout>
            </AppBarButton>
            <AppBarElementContainer>
                <DropDownButton Content="Test DropdownButton">
                    <DropDownButton.Flyout>
                        <MenuFlyout LightDismissOverlayMode="On">
                            <ToggleMenuFlyoutItem Text="Item 1" />
                            <ToggleMenuFlyoutItem Text="Item 2" />
                        </MenuFlyout>
                    </DropDownButton.Flyout>
                </DropDownButton>
            </AppBarElementContainer>
        </CommandBar>
        <Button Content="Click Me" HorizontalAlignment="Center" VerticalAlignment="Center" />
    </Grid>
</Window>

Steps to reproduce the bug

1. Create a new WinUI 3 Packaged project in VS2022
2. Replace the content of MainWindow.xaml by the code above
3. "Run" the app using F5 or Ctrl+F5
4. Click the AppBarButton and DropDownButton in the CommandBar, the behavior is normal now
5. Narrowing the window size so the AppBarButton and DropDownButton are moved to the overflow popup of the CommandBar
6. Click the DropDownButton in CommandBar's overflow popup, the behavior is normal
7. Click the AppBarButton in CommandBar's overflow popup, the light-dismiss overlay is not shown
8. Expanding the window so that AppBarButton and DropDownButton are moved back to the primary commands area
9. Click the DropDownButton, the behavior is normal
10. Click the AppBarButton, the light-dismiss overlay is not shown, the flyout is shown on the right
11. Click the "Click Me" Button in the Window content, the AppBarButton's flyout cannot be dismissed

Expected behavior

The AppBarButton's flyout should always behave normally when it is in the primary command area:

• the light-dismiss overlay is shown
• the flyout can be dismissed by clicking outside
• the flyout should be shown at the bottom

Screenshots

NuGet package version

WinUI 3 - Windows App SDK 1.0 (If you're seeing your issue in older previews of WinUI 3, please try this release)

Windows app type

• UWP
• Win32

Device form factor

Desktop

Windows version

Windows 11 Pro 21H2
22000.348

Additional context

This bug also exists in Windows Explorer ("Sort" DropDown & "View" DropDown).

[Stephen L Peters]

@llongley FYI, thoughts on what might be happening?

[github-actions]

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 5 days.