Question: How to use menuflyout in CommandBarFlyout with touch screen

[zhuxb711]

If the mouse pointer is placed on MenuFlyout in a mouse environment, it will automatically open and work fine. However, in a touch screen environment, it must be clicked to expand MenuFlyout, but CommandBarFlyout will automatically close at this time, so MenuFlyout cannot be expanded in a touch screen environment. I want to know if there is any way to make the touch screen work properly?

Here is mouse:

Here is touch screen:

Here is my example code:

    <CommandBarFlyout x:Name="FileFlyout"
                      Placement="RightEdgeAlignedTop">
            <AppBarButton Label="Open with..."
                          Name="OtherOpenMethod"
                          x:Uid="OtherOpenMethod"
                          Icon="AllApps">
                <AppBarButton.Flyout>
                    <MenuFlyout x:Name="FileOpenMethodFlyout">
                        <MenuFlyoutItem />
                        <MenuFlyoutItem />
                    </MenuFlyout>
                </AppBarButton.Flyout>
            </AppBarButton>
     </CommandBarFlyout>

[shaheedmalik]

That's a bug.

[YuliKl]

This definitely feels like a bug. Seems that CommandBarFlyout is a bit too aggressive in closing when it loses focus. I tried changing its ShowMode and also tried setting the button's AllowFocusOnInteraction property to False but neither helped.

@zhuxb711 one thing to try is replacing your AppBarButton with attached Flyout with:

<AppBarElementContainer>
    <MenuFlyoutSubItem Text="Open with..." Icon="AllApps">
        <MenuFlyoutItem />
        <MenuFlyoutItem />
    </MenuFlyoutSubItem>
</AppBarElementContainer>

I saw two problems with this approach but am curious if this might work for your scenario.

1. The icon didn't render. I believe this is by design because the MenuFlyoutSubItem isn't in a MenuFlyout. Seems that we have not documented this limitation but I recall discussing this decision in the past.
2. The content of the MenuFlyoutSubItem is rendering behind the CommandBarFlyout in z order. I think that's a bug although there may be technical limitations this behavior stems from.

Please give this a try and we may need to open some follow-up issues to track all this.

[zhuxb711]

@YuliKl

I tried it according to your method, but there are some problems, including: the icon does not render correctly, it is shorter than the entire CommandBarFlyout.

In addition, although it works correctly under the touch screen, it cannot be closed once it is expanded

like this:

[zhuxb711]

@YuliKl Is there any progress on the fix for this issue?

[ranjeshj]

@llongley any thoughts on a fix for this issue ?

[zhuxb711]

@YuliKl
@ranjeshj
Regarding this issue, is there any solution available?

[zhuxb711]

Is there any progress now? When will this be fixed?

[StephenLPeters]

@zhuxb711 I got some time and looked into this issue today. The bug in CommandBarFlyout is caused by this line. Normally when we attach the close function to the secondary item's click events we ignore the buttons which have flyout to prevent the closing behavior you are seeing. However it looks like we forgot to include that in this particular case. I will send out a PR to fix this soon, but if you need a work around to use before we publish a new Winui 2 prerelease/release let me know. You could probably work around the bug by inserting your menu items with flyouts into the collection after the fact so that they are treated by the vector changed code path which has the bug fix. Although I haven't tested this work around.

[StephenLPeters]

There is an additional issue where invoking a button from a flyout of a secondary command (with any input) doesn't close the CommandBar. Fixing this will be a little bit trickier, I've opened issue #3052 to track

[zhuxb711]

Clicking a button with flyout will still cause the commandbarflyout to close in 2.5.0-prerelease.200923002
@StephenLPeters

[zhuxb711]

Sorry, now I can confirm that the problem has been properly resolved