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

acouvert-msft commented 3 years ago

Describe the bug

The overflow menu is not automatically hidden when showing a flyout attached to an AppBarButtonwhich 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>

Resize the page so the ... button is visible but contains only AppBarButton2.
Click on ..., it shows the flyout containing AppBarButton2.
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

Animation

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 commented 3 years ago

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

llongley commented 3 years ago

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

alcail commented 2 years ago

@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