MenuFlyout DropShadow persists after it is dismissed

[darenm]

Describe the bug

When adding an additional item with submenu to the TextBox context menu, a drop shadow remains when the MenuFlyout is dismissed.

Steps to reproduce the bug

Note: A repro zip is attached below with steps.

1. Create an AppBarButton with a MenuFlyout and add a MenuFlyoutItem:

public static AppBarButton PasteSpecialAppBarButton { get; private set; }
public static MenuFlyoutItem PasteAsPlainTextMenuFlyoutItem { get; private set; }

static MainWindow()
{
    PasteSpecialAppBarButton = new AppBarButton
    {
        Label = "Paste Special",
    };

    PasteAsPlainTextMenuFlyoutItem = new MenuFlyoutItem
    {
        Text = "Paste as Plain Text",
    };

    PasteSpecialAppBarButton.Flyout = new MenuFlyout();
}

2. Add a TextBox in XAML with focus events:

<TextBox
    x:Name="AddCustomItems"
    GettingFocus="AddCustomItems_GettingFocus"
    IsSpellCheckEnabled="True"
    LosingFocus="AddCustomItems_LosingFocus"
    Text="This is some text" />

3. Obtain a reference to a TextBox context menu and add the PasteSpecialAppBarButton via the GettingFocus event handler

private void AddCustomItems_GettingFocus(UIElement sender, GettingFocusEventArgs args)
{
    AddCustomItems.ContextFlyout.Opening += _contextFlyout_Opening;
    AddCustomItems.ContextFlyout.Closed += _contextFlyout_Closed;
}

private void AddCustomItems_LosingFocus(UIElement sender, LosingFocusEventArgs args)
{
    AddCustomItems.ContextFlyout.Opening -= _contextFlyout_Opening;
    AddCustomItems.ContextFlyout.Closed -= _contextFlyout_Closed;
}

private void _contextFlyout_Opening(object sender, object e)
{
    if (sender is TextCommandBarFlyout tcbf && PasteSpecialAppBarButton.Flyout is MenuFlyout specialFlyout)
    {
        RemovePasteSpecial();
        AddMenuItem(PasteAsPlainTextMenuFlyoutItem, new AsyncRelayCommand(() => ShowDialog()));
        AddPasteSpecial();

        void AddPasteSpecial()
        {
            if (tcbf.SecondaryCommands.Contains(PasteSpecialAppBarButton) == false)
            {
                tcbf.SecondaryCommands.Add(PasteSpecialAppBarButton);
            }
        }

        void RemovePasteSpecial()
        {
            if (tcbf.SecondaryCommands.Contains(PasteSpecialAppBarButton) == true)
            {
                tcbf.SecondaryCommands.Remove(PasteSpecialAppBarButton);
            }
        }

        void AddMenuItem(MenuFlyoutItem item, ICommand command) => AddAddMenuItemWithParameter(item, command, null);

        void AddAddMenuItemWithParameter(MenuFlyoutItem item, ICommand command, object parameter)
        {
            item.CommandParameter = parameter;
            item.Command = command;
            if (specialFlyout.Items.Contains(item) == false)
            {
                specialFlyout.Items.Add(item);
            }
        }
    }
}

private void _contextFlyout_Closed(object sender, object e)
{
    if (sender is TextCommandBarFlyout tcbf)
    {
        if (tcbf.SecondaryCommands.Contains(PasteSpecialAppBarButton))
        {
            tcbf.SecondaryCommands.Remove(PasteSpecialAppBarButton);
        }

        RemoveMenuItem(PasteAsPlainTextMenuFlyoutItem);
    }
}

private async Task ShowDialog()
{
    var cd = new ContentDialog
    {
        Title = "Paste Special",
        Content = "Paste as Plain Text",
        IsPrimaryButtonEnabled = true,
        PrimaryButtonText = "Ok",
        XamlRoot = MyStack.XamlRoot
    };
    await cd.ShowAsync();
}

void RemoveMenuItem(MenuFlyoutItem item)
{
    try
    {
        if (PasteSpecialAppBarButton.Flyout is MenuFlyout specialFlyout &&
            specialFlyout.Items.Contains(item) == true)
        {
            item.CommandParameter = null;
            item.Command = null;
            specialFlyout.Items.Remove(item);
        }
    }
    catch (Exception ex)
    {
        System.Diagnostics.Debug.WriteLine($"RemoveMenuItem: {ex}");
    }
}

Repro

WinUISubMenu.zip

Steps to repro in app:

1. Compile and launch app.
2. Right-click in textbox so that context menu opens.
3. Select "Paste Special" and then select "Paste as Plain Text".
4. Note that the context menu is dismissed and a ContentDialog is displayed. Also note that a vestigial dropshadow remains, event after the ContentDialog is dismissed.

Expected behavior

The drop shadow is no longer rendered once the MenuFlyout is closed.

Screenshots

NuGet package version

WinUI 3 - Windows App SDK 1.5.1: 1.5.240311000

Windows version

Windows 11 (22H2): Build 22621

Additional context

No response

[github-actions]

Hi I'm an AI powered bot that finds similar issues based off the issue title.

Please view the issues below to see if they solve your problem, and if the issue describes your problem please consider closing this one. Thank you!

Open similar issues:

• Can't add MenuFlyoutItem to MenuFlyoutSubItem at runtime (#7797), similarity score: 0.75

Closed similar issues:

• Shadows on Flyout flicker upon opening (#7630), similarity score: 0.82
• The default shadow style of ContentDialog vanishes after poping up a context menu (#5686), similarity score: 0.79
• WinUI3 preview 3 - Shadow animation of opened flyouts is shown twice (#6206), similarity score: 0.76
• MenuFlyout does not update correctly on theme change (#8077), similarity score: 0.75

Note: You can give me feedback by thumbs upping or thumbs downing this comment.