More's flyout remains open when showing an AppBarButton's flyout outside the More button.

[acouvert-msft]

Describe the bug

The overflow menu is not automatically hidden when showing a flyout attached to an AppBarButton which is part of the primary commands.

Steps to reproduce the bug

Using the following code:

<Page
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid>
        <CommandBar
            VerticalContentAlignment="Center"
            DefaultLabelPosition="Right">

            <AppBarButton Label="AppBarButton1">
                <AppBarButton.Flyout>
                    <MenuFlyout Placement="Bottom">
                        <MenuFlyoutItem>Item 1</MenuFlyoutItem>
                        <MenuFlyoutItem>Item 2</MenuFlyoutItem>
                    </MenuFlyout>
                </AppBarButton.Flyout>
            </AppBarButton>

             <AppBarButton Label="AppBarButton2">
                <AppBarButton.Flyout>
                    <MenuFlyout Placement="Bottom">
                        <MenuFlyoutItem>Item 3</MenuFlyoutItem>
                        <MenuFlyoutItem>Item 4</MenuFlyoutItem>
                    </MenuFlyout>
                </AppBarButton.Flyout>
            </AppBarButton>
        </CommandBar>
    </Grid>
</Page>

1. Resize the page so the ... button is visible but contains only AppBarButton2.
2. Click on ..., it shows the flyout containing AppBarButton2.
3. Click on AppBarButton1, it shows its flyout as expected but the flyout containing AppBarButton2 is still visible.

Expected behavior

When clicking on AppBarButton1, the ...'s flyout containing the overflow menu should be hidden before showing the flyout attached to AppBarButton1.

Screenshots

NuGet package version

Microsoft.UI.Xaml 2.7.0

Windows app type

• [X] UWP
• [ ] Win32

Device form factor

Desktop

Windows version

May 2021 Update (19043)

Additional context

No response

[StephenLPeters]

I think this will not be fixable from Winui2. but maybe @llongley thinks it could happen with a template change.

[llongley]

I don't think this is fixable in WinUI 2, no. CommandBar is an control in Windows.UI.Xaml.

[alcail]

@StephenLPeters, @llongley A bug was filled out on our product with the same issue and wondering if there's any known workaround or if this will be fixed with WinUI 2 as it's marked as "needs-winui-3"

More's Flyout (red rectangle below) is still opened and appears behind the Sort's Flyout (green rectangle below) which was opened after the More's

[github-actions[bot]]

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.

[acouvert-msft]

Any update regarding this issue?

[DmitriyKomin]

Confirmed the issue reproes in WinAppSDK (v. 1.4.230913002).

Repro app: WASDK_CSharp_GH_ReproProject (2).zip