diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/Components/AppBar/Examples/AppBarClick.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/Components/AppBar/Examples/AppBarClick.razor index 021df78499..04f3dabc5a 100644 --- a/examples/Demo/FluentUI.Demo.Client/Documentation/Components/AppBar/Examples/AppBarClick.razor +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/Components/AppBar/Examples/AppBarClick.razor @@ -1,33 +1,35 @@ @inject IDialogService DialogService - - - - - - - +
+ + + + + + + +
@code { diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/Components/AppBar/Examples/AppBarFromListOfApps.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/Components/AppBar/Examples/AppBarFromListOfApps.razor index b9a6a3e424..eb76fb6f68 100644 --- a/examples/Demo/FluentUI.Demo.Client/Documentation/Components/AppBar/Examples/AppBarFromListOfApps.razor +++ b/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 OnClick { get; set; } } diff --git a/src/Core/Components/AppBar/FluentAppBar.razor b/src/Core/Components/AppBar/FluentAppBar.razor index 014fcbf160..f5555b45aa 100644 --- a/src/Core/Components/AppBar/FluentAppBar.razor +++ b/src/Core/Components/AppBar/FluentAppBar.razor @@ -13,7 +13,7 @@ { foreach (var item in Items) { - + } } @if (AppsOverflow.Any()) @@ -59,7 +59,7 @@ @foreach (var item in _searchResults) { - + } diff --git a/src/Core/Components/AppBar/FluentAppBar.razor.cs b/src/Core/Components/AppBar/FluentAppBar.razor.cs index a3114befc8..d76b0400a4 100644 --- a/src/Core/Components/AppBar/FluentAppBar.razor.cs +++ b/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) { diff --git a/src/Core/Components/AppBar/FluentAppBarItem.razor.cs b/src/Core/Components/AppBar/FluentAppBarItem.razor.cs index 24a8910c85..70415fa46b 100644 --- a/src/Core/Components/AppBar/FluentAppBarItem.razor.cs +++ b/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 . /// [Parameter] - public ushort? Count { get; set; } + public int? Count { get; set; } /// /// 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); } } diff --git a/src/Core/Components/AppBar/IAppBarItem.cs b/src/Core/Components/AppBar/IAppBarItem.cs index 8345abf99b..3d74981d58 100644 --- a/src/Core/Components/AppBar/IAppBarItem.cs +++ b/src/Core/Components/AppBar/IAppBarItem.cs @@ -52,7 +52,7 @@ public interface IAppBarItem /// /// Gets or sets the count to show on the item with a . /// - public ushort? Count { get; set; } + public int? Count { get; set; } /// /// Whether this app is outside of visible app bar area. diff --git a/src/Core/Components/AppBar/InternalAppBarContext.cs b/src/Core/Components/AppBar/InternalAppBarContext.cs index d79e1c1dad..11259bfb92 100644 --- a/src/Core/Components/AppBar/InternalAppBarContext.cs +++ b/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); } diff --git a/tests/Core/Components/AppBar/FluentAppBarTests.razor b/tests/Core/Components/AppBar/FluentAppBarTests.razor index f2f245c93a..0e5db47350 100644 --- a/tests/Core/Components/AppBar/FluentAppBarTests.razor +++ b/tests/Core/Components/AppBar/FluentAppBarTests.razor @@ -45,11 +45,11 @@ var cut = Render( @ - + - - ); + + ); // 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( + @ + + + + ); + + // 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(); + var itemInPopover = popover.FindComponent(); + 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(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 OnClick { get; set; } }