MenuFlyout crashes in Xaml Islands

Describe the bug When opening submenus in quick succession in MenuFlyout on Xaml Islands, there is a chance it can crash the whole program.

Steps to reproduce the bug

1. Create a new blank WPF .NET Framework app.
2. Add the Microsoft.Toolkit.Wpf.UI.XamlHost NuGet package.
3. Add a project reference to the UniversalApiContract winmd from the Windows SDK.
4. Add an app manifest to the app, and within <compatibility> add <maxversiontested Id="10.0.19041.0" />
5. In MainWindow.xaml, write the following

   <Window x:Class="WpfApp2.MainWindow"
           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"
           xmlns:local="clr-namespace:WpfApp2" xmlns:xamlhost="clr-namespace:Microsoft.Toolkit.Wpf.UI.XamlHost;assembly=Microsoft.Toolkit.Wpf.UI.XamlHost"
           mc:Ignorable="d"
           Title="MainWindow" Height="450" Width="800">
       <Grid>
           <xamlhost:WindowsXamlHost x:Name="host" />
       </Grid>
   </Window>
   

6. In MainWindow.xaml.cs, write this code

   public partial class MainWindow : Window
   {
       private Windows.UI.Xaml.Controls.MenuFlyoutSubItem MakeSubMenu(int i)
       {
           var sub = new Windows.UI.Xaml.Controls.MenuFlyoutSubItem
           {
               Text = $"Submenu {i}"
           };
   
           foreach (var j in Enumerable.Range(0, 10))
           {
               sub.Items.Add(new Windows.UI.Xaml.Controls.MenuFlyoutItem
               {
                   Text = $"Item {j}"
               });
           }
   
           return sub;
       }
   
       public MainWindow()
       {
           InitializeComponent();
   
           var rect = new Windows.UI.Xaml.Shapes.Rectangle
           {
               Fill = new Windows.UI.Xaml.Media.SolidColorBrush(Windows.UI.Colors.Red),
               Width = 50,
               Height = 50
           };
   
           var flyout = new Windows.UI.Xaml.Controls.MenuFlyout();
           foreach (var i in Enumerable.Range(0, 10))
           {
               flyout.Items.Add(MakeSubMenu(i));
           }
   
           rect.ContextFlyout = flyout;
           host.Child = rect;
       }
   }
   

7. Launch the app.
8. Right-click on the red square
9. Open different sub-menus in quick succession.

Expected behavior The app does not crash

Screenshots

Version Info

NuGet package version: [Microsoft.Toolkit.Wpf.UI.XamlHost 6.1.2]

Windows app type:

UWP	Win32
	Yes

Windows 10 version	Saw the problem?
Insider Build (xxxxx)
May 2020 Update (19041)	Yes
November 2019 Update (18363)
May 2019 Update (18362)
October 2018 Update (17763)
April 2018 Update (17134)
Fall Creators Update (16299)
Creators Update (15063)

Device form factor	Saw the problem?
Desktop	Yes
Xbox
Surface Hub
IoT

Additional context This also happens in my C+±based XAML islands app, so this is not an issue specific to the WCT WPF host, it just makes reproduction easier.

Here’s a video recording of the issue: https://imgur.com/pHTPAB2

[sylveon]

Seems to be fixed in Windows 11, would appreciate the fix to be backported to Windows 10.

[lyahdav]

I found a workaround: https://github.com/microsoft/microsoft-ui-xaml/issues/3529#issuecomment-827211418