[dev-v5][AppBar] Fix OnClick not being handled in popover

examples/Demo/FluentUI.Demo.Client/Documentation/Components/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(--colorNeutralBackground5); overflow: hidden; resize: vertical; height: 270px; width: 86px; padding: 10px;">
+        <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="HandleOnClick" />
+            <FluentAppBarItem Href="/Dialog"
+                              IconRest="DialogIcon()"
+                              IconActive="DialogIcon(active: true)"
+                              Text="Dialog"
+                              OnClick="HandleOnClick" />
+        </FluentAppBar>
+    </div>
 </FluentStack>
 
 @code {

examples/Demo/FluentUI.Demo.Client/Documentation/Components/AppBar/Examples/AppBarFromListOfApps.razor

@@ -22,7 +22,7 @@
 		public Icon? IconActive { get; set; }
         public string Text { get; set; } = string.Empty;
         public string? Tooltip { get; set; }
-        public ushort? Count { get; set; }
+        public int? Count { get; set; }
         public bool? Overflow { get; set; }
         public EventCallback<IAppBarItem> OnClick { get; set; }
     }

src/Core/Components/AppBar/FluentAppBar.razor

@@ -13,7 +13,7 @@
 		{
 			foreach (var item in Items)
 			{
-				<FluentAppBarItem IconRest="@item.IconRest" IconActive="@item.IconActive" Text="@item.Text" Href="@item.Href" Count="@item.Count" />
+				<FluentAppBarItem Id="@item.Id" IconRest="@item.IconRest" IconActive="@item.IconActive" Text="@item.Text" Href="@item.Href" Count="@item.Count" Tooltip="@item.Tooltip" Match="@item.Match" OnClick="@item.OnClick" />
 			}
 		}
 		@if (AppsOverflow.Any())
@@ -59,7 +59,7 @@
 							@foreach (var item in _searchResults)
 							{
 								<FluentGridItem xs="4" Style="width: 100px; height: 85px; display: flex; height: 85px; align-content: center; flex-wrap: wrap; justify-content: center;">
-									<FluentAppBarItem IconRest="@item.IconRest" Text="@item.Text" Href="@item.Href" Count="@item.Count" inpopover="true" />
+									<FluentAppBarItem Id="@item.Id" IconRest="@item.IconRest" Text="@item.Text" Href="@item.Href" Count="@item.Count" Tooltip="@item.Tooltip" OnClick="@item.OnClick" inpopover="true" />
 								</FluentGridItem>
 							}
 						</FluentGrid>

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

@@ -146,7 +146,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

@@ -63,7 +63,7 @@ public FluentAppBarItem(LibraryConfiguration configuration) : base(configuration
     /// Gets or sets the count to show on the item with a <see cref="FluentCounterBadge"/>.
     /// </summary>
     [Parameter]
-    public ushort? Count { get; set; }
+    public int? Count { get; set; }
 
     /// <summary>
     ///  Gets or sets the content to be shown.
@@ -127,6 +127,11 @@ internal async Task OnClickHandlerAsync(MouseEventArgs ev)
     {
         if (OnClick.HasDelegate)
         {
+            if (Overflow is true)
+            {
+                await Owner.AppBar.TogglePopoverAsync();
+            }
+
             await OnClick.InvokeAsync(this);
         }
     }

src/Core/Components/AppBar/IAppBarItem.cs

@@ -52,7 +52,7 @@ public interface IAppBarItem
     /// <summary>
     /// Gets or sets the count to show on the item with a <see cref="FluentCounterBadge"/>.
     /// </summary>
-    public ushort? Count { get; set; }
+    public int? Count { get; set; }
 
     /// <summary>
     /// Whether this app is outside of visible app bar area.

src/Core/Components/AppBar/InternalAppBarContext.cs

@@ -16,7 +16,7 @@ internal void Register(IAppBarItem app)
             return;
         }
 
-        Apps.Add(app.Id, app);
+        Apps.TryAdd(app.Id, app);
     }
 
     internal void Unregister(IAppBarItem app)
@@ -26,7 +26,7 @@ internal void Unregister(IAppBarItem app)
             return;
         }
 
-        if (Apps.Count > 0)
+        if (Apps.TryGetValue(app.Id, out var registered) && registered == app)
         {
             Apps.Remove(app.Id);
         }

tests/Core/Components/AppBar/FluentAppBarTests.razor

@@ -45,11 +45,11 @@
         var cut = Render<FluentAppBar>(
             @<FluentAppBar Id="appbar">
                 <FluentAppBarItem Href="/" Id="id1" Text="My item" IconRest="@(new Samples.Icons.Samples.Info())" IconActive="@(new Samples.Icons.Samples.Warning())" Tooltip="My item tooltip">
-                </FluentAppBarItem>
+            </FluentAppBarItem>
                 <FluentAppBarItem Href="/" Id="id2" Text="My item 2" IconRest="@(new Samples.Icons.Samples.Info())" IconActive="@(new Samples.Icons.Samples.Warning())" Tooltip="My item 2 tooltip">
                 </FluentAppBarItem>
-                </FluentAppBar>
-            );
+        </FluentAppBar>
+        );
 
         // This does not contribute to html output but helps for code coverage testing
         await cut.Instance.OverflowRaisedAsync(new OverflowItem[] { new OverflowItem() { Id = "id1", Overflow = false, Text = "My item" }, new OverflowItem() { Id = "id2", Overflow = true, Text = "My item 2" } });
@@ -472,9 +472,49 @@
             if (result is Task task) await task;
         }
 
-        // Assert: Since initial _showMoreItems is false, toggle should set to true
-        Assert.True(popoverVisible);
-    }
+		// Assert: Since initial _showMoreItems is false, toggle should set to true
+		Assert.True(popoverVisible);
+	}
+
+	[Fact]
+	public async Task FluentAppBar_OverflowItem_OnClick_ClosesPopover()
+	{
+		// Arrange
+		bool popoverVisible = false;
+		bool onClickCalled = false;
+
+		var cut = Render<FluentAppBar>(
+			@<FluentAppBar PopoverVisibilityChanged="@((bool visible) => popoverVisible = visible)">
+				<FluentAppBarItem Id="id1" Text="My item" IconRest="@(new Samples.Icons.Samples.Info())" OnClick="@(_ => onClickCalled = true)">
+				</FluentAppBarItem>
+			</FluentAppBar>
+		);
+
+		// Act - Simulate overflow for the item
+		await cut.Instance.OverflowRaisedAsync(new OverflowItem[] { new OverflowItem() { Id = "id1", Overflow = true, Text = "My item" } });
+		cut.Render();
+
+		// Show popover by clicking the "More" button
+		var moreButton = cut.Find(".fluent-appbar-item[fixed]"); 
+		await moreButton.ClickAsync();
+		cut.Render();
+
+		Assert.True(popoverVisible);
+
+		// Find the item in the popover.
+		var popover = cut.FindComponent<FluentPopover>();
+		var itemInPopover = popover.FindComponent<FluentAppBarItem>();
+        itemInPopover.Instance.Overflow = true;
+
+		// Find the NavLink and click it
+		var navLink = itemInPopover.Find("a");
+		await navLink.ClickAsync();
+		cut.Render();
+
+		// Assert
+		Assert.True(onClickCalled);
+		Assert.False(popoverVisible);
+	}
 
 	private T? GetPrivateField<T>(object obj, string fieldName)
     {
@@ -492,7 +532,7 @@
         public Icon? IconActive { get; set; }
         public string Text { get; set; } = string.Empty;
         public string? Tooltip { get; set; }
-        public ushort? Count { get; set; }
+        public int? Count { get; set; }
         public bool? Overflow { get; set; }
         public EventCallback<IAppBarItem> OnClick { get; set; }
     }