Fix issue with flyouts created in CommandBarFlyout not closing when commandbar closes

dev/CommandBarFlyout/CommandBarFlyout.cpp

@@ -162,8 +162,9 @@ CommandBarFlyout::CommandBarFlyout()
                             Hide();
                             m_isClosingAfterCloseAnimation = false;
                         });
-                    commandBar->IsOpen(false);
                 }
+                // Close commandbar and thus other associated flyouts
+                commandBar->IsOpen(false);
 
                 //CommandBarFlyoutCommandBar.Closed will be called when
                 //clicking the more (...) button, we clear the translations

dev/CommandBarFlyout/InteractionTests/CommandBarFlyoutTests.cs

@@ -620,5 +620,46 @@ public void VerifyFlowsToAndFromIsNotSetWithoutPrimaryCommands()
                 InputHelper.Tap(showCommandBarFlyoutButton);
             }
         }
+
+        [TestMethod]
+        public void VerifyFlyoutClosingBehavior()
+        {
+            if (PlatformConfiguration.IsOSVersionLessThan(OSVersion.Redstone2))
+            {
+                Log.Warning("Test is disabled pre-RS2 because CommandBarFlyout is not supported pre-RS2");
+                return;
+            }
+
+            using (var setup = new CommandBarFlyoutTestSetupHelper())
+            {
+                Button showCommandBarFlyoutButton = FindElement.ByName<Button>("Show CommandBarFlyout with sub-menu");
+
+                Log.Comment("Tapping on a button to show the CommandBarFlyout.");
+                showCommandBarFlyoutButton.Click();
+
+                // Pre-RS5, CommandBarFlyouts always open expanded,
+                // so we don't need to tap on the more button in that case.
+                if (PlatformConfiguration.IsOsVersionGreaterThanOrEqual(OSVersion.Redstone5))
+                {
+                    Log.Comment("Expanding the CommandBar by invoking the more button.");
+                    FindElement.ById<Button>("MoreButton").InvokeAndWait();
+                }
+
+                // Click item to open flyout
+                FindElement.ById<Button>("ProofingButton").Click();
+
+                // Move around over the first item to keep flyout open safely
+                // This also verifies that the flyout is open as it would crash otherwise
+                PointerInput.Move(FindElement.ByName("FirstFlyoutItem"), 5, 5);
+                PointerInput.Move(FindElement.ByName("FirstFlyoutItem"), 6, 5);
+                PointerInput.Move(FindElement.ByName("FirstFlyoutItem"), 5, 6);
+
+                // Click outside of the flyout to close it
+                InputHelper.Tap(FindElement.ByName<Button>("Show CommandBarFlyout"));
+
+                // Check that the flyout item is not present anymore
+                VerifyElement.NotFound("FirstFlyoutItem",FindBy.Name);
+            }
+        }
     }
 }

dev/CommandBarFlyout/TestUI/CommandBarFlyoutPage.xaml

@@ -98,7 +98,7 @@
                     <AppBarButton x:Name="ProofingButton" AutomationProperties.AutomationId="ProofingButton" Label="Proofing" Click="OnElementClicked">
                         <AppBarButton.Flyout>
                             <MenuFlyout>
-                                <MenuFlyoutItem Text="talk" />
+                                <MenuFlyoutItem AutomationProperties.Name="FirstFlyoutItem" Text="talk" />
                                 <MenuFlyoutItem Text="talks" />
                                 <MenuFlyoutItem Text="talk a" />
                                 <MenuFlyoutSeparator />