[AppBar] Make OnClick close popover

examples/Demo/Shared/Pages/AppBar/Examples/AppBarClick.razor

@@ -1,33 +1,35 @@
 @inject IDialogService DialogService
 
 <FluentStack Orientation="Orientation.Vertical" Style="height: 330px;">
-    <FluentAppBar Style="height: 100%;">
-        <FluentAppBarItem Href="/"
-                          Match="NavLinkMatch.All"
-                          IconRest="HomeIcon()"
-                          IconActive="HomeIcon(active: true)"
-                          Text="Home"
-                          OnClick="HandleOnClick" />
-        <FluentAppBarItem Href="/AppBar"
-                          IconRest="AppBarIcon()"
-                          IconActive="AppBarIcon(active: true)"
-                          Text="AppBar"
-                          OnClick="HandleOnClick" />
-        <FluentAppBarItem IconRest="WhatsNewIcon()"
-                          IconActive="WhatsNewIcon(active: true)"
-                          Text="What's New"
-                          OnClick="ShowSuccessAsync" />
-        <FluentAppBarItem Href="@(null)"
-                          IconRest="IconsIcon()"
-                          IconActive="IconsIcon(active: true)"
-                          Text="Icons"
-                          OnClick="ShowWarningAsync" />
-        <FluentAppBarItem Href="/Dialog"
-                          IconRest="DialogIcon()"
-                          IconActive="DialogIcon(active: true)"
-                          Text="Dialog"
-                          OnClick="HandleOnClick" />
-    </FluentAppBar>
+    <div style="background-color: var(--neutral-layer-3); overflow: auto; resize: vertical; height: 356px; width: 86px; padding: 10px;">
+        <FluentAppBar Style="height: 100%; background-color: var(--neutral-layer-2);">
+            <FluentAppBarItem Href="/"
+                              Match="NavLinkMatch.All"
+                              IconRest="HomeIcon()"
+                              IconActive="HomeIcon(active: true)"
+                              Text="Home"
+                              OnClick="HandleOnClick" />
+            <FluentAppBarItem Href="/AppBar"
+                              IconRest="AppBarIcon()"
+                              IconActive="AppBarIcon(active: true)"
+                              Text="AppBar"
+                              OnClick="HandleOnClick" />
+            <FluentAppBarItem IconRest="WhatsNewIcon()"
+                              IconActive="WhatsNewIcon(active: true)"
+                              Text="What's New"
+                              OnClick="ShowSuccessAsync" />
+            <FluentAppBarItem Href="@(null)"
+                              IconRest="IconsIcon()"
+                              IconActive="IconsIcon(active: true)"
+                              Text="Icons"
+                              OnClick="HandleOnClick" />
+            <FluentAppBarItem Href="/Dialog"
+                              IconRest="DialogIcon()"
+                              IconActive="DialogIcon(active: true)"
+                              Text="Dialog"
+                              OnClick="HandleOnClick" />
+        </FluentAppBar>
+    </div>
 </FluentStack>
 
 @code {

examples/Demo/Shared/Pages/AppBar/Examples/AppBarFromListOfApps.razor

@@ -1,9 +1,8 @@
 <FluentStack Orientation="Orientation.Vertical" Style="height: 100%;">
     <FluentSwitch @bind-Value="_showSearch" CheckedMessage="Show" UncheckedMessage="Hide" Label="Show search in popover" />
-    <div style="background-color: var(--neutral-layer-3); overflow: auto; resize: vertical; height: 356px; width: 500px; padding: 10px;">
-        <FluentAppBar
-                      Items="@_apps.OrderBy(a => a.Order)"
-                      Style="width: 68px; height: 100%; background-color: var(--neutral-layer-2);"
+    <div style="background-color: var(--neutral-layer-3); overflow: auto; resize: vertical; height: 356px; width: 86px; padding: 10px;">
+        <FluentAppBar Items="@_apps.OrderBy(a => a.Order)"
+                      Style="height: 100%; background-color: var(--neutral-layer-2);"
                       PopoverVisibilityChanged="HandlePopover"
                       PopoverShowSearch="@_showSearch">
         </FluentAppBar>

src/Core/Components/AppBar/FluentAppBar.razor.cs

@@ -144,7 +144,7 @@ private async Task InitializeOverflowAsync()
         }
     }
 
-    private Task TogglePopoverAsync() => HandlePopoverToggleAsync(!_showMoreItems);
+    internal Task TogglePopoverAsync() => HandlePopoverToggleAsync(!_showMoreItems);
 
     private async Task HandlePopoverKeyDownAsync(FluentKeyCodeEventArgs args)
     {

src/Core/Components/AppBar/FluentAppBarItem.razor.cs

@@ -105,6 +105,11 @@ protected async Task OnClickHandlerAsync(MouseEventArgs ev)
     {
         if (OnClick.HasDelegate)
         {
+            if (Overflow is true)
+            {
+                await Owner.AppBar.TogglePopoverAsync();
+            }
+
             await OnClick.InvokeAsync(this);
         }
     }