Skip to content

Wasm not deselecting nav menu #544

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
vnbaaij merged 18 commits into from
Jul 17, 2023
Merged

Wasm not deselecting nav menu #544

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
e9bc5d4
Add SetSelectedAsync
mrpmorris Jul 13, 2023
9604635
Nearly!
mrpmorris Jul 13, 2023
c43ad2b
Async Debouncer
mrpmorris Jul 13, 2023
47e9158
Update debouncer for thread safety
mrpmorris Jul 13, 2023
b13f075
Debouncer updates
mrpmorris Jul 13, 2023
433956d
It all works!
mrpmorris Jul 13, 2023
7c7dfab
Improved demos
mrpmorris Jul 13, 2023
9021c11
Remove collapsible
mrpmorris Jul 13, 2023
e941835
Debounce CurrentSelectedChanged
mrpmorris Jul 14, 2023
312a0a0
Clear _allItems on dispose
mrpmorris Jul 14, 2023
14ecafd
Works how it is supposed to, now just needs better demos
mrpmorris Jul 14, 2023
4ba6187
Everything works!
mrpmorris Jul 14, 2023
359a97f
Update notes
mrpmorris Jul 14, 2023
5cea99f
Ship it!
mrpmorris Jul 14, 2023
95e9995
Merge branch 'new-components' into 532/PeteM-WasmNotDeselectingNavMenu
vnbaaij Jul 15, 2023
17e0bda
PR comments
mrpmorris Jul 17, 2023
3492bfd
Merge branch '532/PeteM-WasmNotDeselectingNavMenu' of https://github.…
mrpmorris Jul 17, 2023
41e0b92
Merge branch 'new-components' into 532/PeteM-WasmNotDeselectingNavMenu
vnbaaij Jul 17, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 6 additions & 6 deletions examples/Demo/Shared/Pages/NavMenu/Examples/NavMenuCollapsible.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,13 +5,13 @@
<FluentStack Orientation="Orientation.Horizontal" Width="100%">
<div>
<FluentNavMenu @bind-Expanded="@Expanded" Width="150" Collapsible="true">
<FluentNavMenuLink Icon="@(new Icons.Regular.Size24.Home())" Text="Item 1" />
<FluentNavMenuLink Icon="@(new Icons.Regular.Size24.Cloud())" Text="Item 2" />
<FluentNavMenuGroup Text="Item 3" Icon="@(new Icons.Regular.Size24.EarthLeaf())">
<FluentNavMenuLink Icon="@(new Icons.Regular.Size24.LeafOne())" Text="Item 3.1" />
<FluentNavMenuLink Icon="@(new Icons.Regular.Size24.LeafTwo())" Text="Item 3.2" />
<FluentNavMenuLink Icon="@(new Icons.Regular.Size24.Home())" Text="Item 1" Href="/NavMenu" />
<FluentNavMenuLink Icon="@(new Icons.Regular.Size24.Cloud())" Text="Item 2" Href="/NavMenu" />
<FluentNavMenuGroup Text="Item 3" Icon="@(new Icons.Regular.Size24.EarthLeaf())" Href="/NavMenu">
<FluentNavMenuLink Icon="@(new Icons.Regular.Size24.LeafOne())" Text="Item 3.1" Href="/NavMenu" />
<FluentNavMenuLink Icon="@(new Icons.Regular.Size24.LeafTwo())" Text="Item 3.2" Href="/NavMenu" />
</FluentNavMenuGroup>
<FluentNavMenuLink Icon="@(new Icons.Regular.Size24.CalendarAgenda())" Text="Item 4" Disabled="true" />
<FluentNavMenuLink Icon="@(new Icons.Regular.Size24.CalendarAgenda())" Text="Item 4" Disabled="true" Href="https://microsoft.com" />
</FluentNavMenu>
</div>
<div style="width: 100%;">
Expand Down
84 changes: 29 additions & 55 deletions examples/Demo/Shared/Pages/NavMenu/Examples/NavMenuCustomActions.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,48 +1,45 @@
@namespace FluentUI.Demo.Shared
@using System.Text;
@namespace FluentUI.Demo.Shared

<h2>Custom Actions Example</h2>

<FluentStack Orientation="Orientation.Horizontal" Width="100%">
<div>
<FluentNavMenu OnAction="@InterceptAtMenuLevel">
@*
These items are handled by the MenuLevelHandler, which intercepts any components
with a name ending with _HandleAtMenuLevel
This item is handled by the MenuLevelHandler, which intercepts all items
but will only handle ones with Id ending with _HandleAtMenuLevel
*@
<FluentNavMenuLink Id="Item1_HandleAtMenuLevel" Text="Item 1 - Handled at menu level" />
<FluentNavMenuLink Id="Item2_HandleAtMenuLevel" Text="Item 2 - Handled at menu level" />
<FluentNavMenuLink Id="HandleAtMenuLevel" Text="Handled at menu level" Icon="@(new Icons.Regular.Size24.Home())" />

@*
These items each have an OnAction callback specified that intercepts any components
with a name ending with _HandleAtItemLevel
This item has an OnAction callback specified at item level
*@
<FluentNavMenuGroup OnAction="@InterceptAtMenuLevelAsync" Id="Item3_HandleAtItemLevel" Text="Item 3" InitiallyExpanded="true">
<FluentNavMenuLink OnAction="@InterceptAtMenuLevelAsync" Id="Item3_1_HandleAtItemLevel" Text="Item 3.1" />
<FluentNavMenuLink OnAction="@InterceptAtMenuLevelAsync" Id="Item3_2_HandleAtItemLevel" Text="Item 3.2" />
</FluentNavMenuGroup>
<FluentNavMenuLink OnAction="@InterceptAtItemLevel" Text="Handled at item level" Icon="@(new Icons.Regular.Size24.LeafOne())" />

@*
None of these items have an Id that is handled by the two previous handler callbacks, and
none have a Href, so these won't be selectable
This item is intercepted by the menu but not marked as handled.
It does not have an item handler to mark it as handled.
It does not have a Href, so will not be selectable.
*@
<FluentNavMenuGroup Text="Item 4" InitiallyExpanded="true">
<FluentNavMenuLink Text="Item 4.1" />
<FluentNavMenuLink OnAction="@InterceptAtMenuLevelAsync" Text="Item 4.2" />
</FluentNavMenuGroup>
<FluentNavMenuLink Text="Not selectable" Icon="@(new Icons.Regular.Size24.DismissCircle())" />

@*
This item shows a dialog
*@
<FluentNavMenuLink OnAction="@ShowDialog" Text="Show a dialog" />
<FluentNavMenuLink OnAction="@ShowDialog" Text="Show a dialog" Icon="@(new Icons.Regular.Size24.Window())" />

@*
This item doesn't have a special Id, so won't be handled by the menu-level handler.
It doesn't have a menu-level interceptor specified.
It does have a Href, so will navigate.
This item is disabled
*@
<FluentNavMenuLink OnAction="@InterceptAtMenuLevelAsync" Href="https://microsoft.com" Text="Default behavior (navigate)" />
<FluentNavMenuLink Disabled Text="Disabled" Icon="@(new Icons.Regular.Size24.Prohibited())" Href="https://microsoft.com"/>

@*
This item is intercepted by the menu but not marked as handled.
It does not have an item handler to mark it as handled.
It does have a Href, so it will navigate.
*@
<FluentNavMenuLink Href="https://microsoft.com" Text="Default behavior (navigate)" Icon="@(new Icons.Regular.Size24.Earth())" />
</FluentNavMenu>
</div>
<div style="width: 100%;">
Expand All @@ -59,54 +56,31 @@

@code
{
StringBuilder _output = new();
bool _hideDialog = true;
StringBuilder _output = new();

void InterceptAtMenuLevel(NavMenuActionArgs args)
{
_output = new StringBuilder();
_output.AppendLine($"Item \"{args.Target.Id}\" actioned at {DateTime.Now}");
_output.AppendLine($"Intercepting at menu level via {nameof(FluentNavMenu)}.{nameof(FluentNavMenu.OnAction)}");
if (args.Target.Id?.EndsWith("_HandleAtMenuLevel", StringComparison.OrdinalIgnoreCase) == true)
_output.AppendLine($"Actioned at {DateTime.Now}");
_output.AppendLine($"Item \"{args.Target.Id}\" intercepted at menu level.");
if (args.Target.Id == "HandleAtMenuLevel")
{
_output.AppendLine($"Handled!");
_output.AppendLine("Handled at menu level.");
args.SetHandled();
}
else
{
_output.AppendLine($"Ignored!");
}
}

async Task InterceptAtMenuLevelAsync(NavMenuActionArgs args)
void InterceptAtItemLevel(NavMenuActionArgs args)
{
_output.AppendLine();
_output.AppendLine($"Intercepting at item level via {args.Target.GetType().Name}.{nameof(FluentNavMenu.OnAction)}");
if (args.Target.Id?.EndsWith("_HandleAtItemLevel", StringComparison.OrdinalIgnoreCase) == true)
{
_output.AppendLine($"Handled!");
args.SetHandled();
}
else
{
_output.AppendLine($"Ignored!");
if (string.IsNullOrEmpty(args.Target.Href))
{
_output.AppendLine($"No {nameof(FluentNavMenuItemBase.Href)} - so selection was prevented");
}
else
{
_output.AppendLine($"{nameof(FluentNavMenuItemBase.Href)} was set, navigating to {args.Target.Href}");
_output.AppendLine();
_output.AppendLine("BYE!!");
StateHasChanged();
await Task.Delay(1000);
}
}
_output.AppendLine($"Item \"{args.Target.Id}\" intercepted at item level.");
_output.AppendLine("Handled at item level.");
args.SetHandled();
}

void ShowDialog(NavMenuActionArgs args)
{
_output.AppendLine($"Item \"{args.Target.Id}\" intercepted at item level.");
_hideDialog = false;
args.SetHandled();
}
Expand Down
12 changes: 6 additions & 6 deletions examples/Demo/Shared/Pages/NavMenu/Examples/NavMenuDataBound.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,13 +7,13 @@
<FluentStack Orientation="Orientation.Horizontal">
<!-- Menu with sub-items and icons -->
<FluentNavMenu @bind-Expanded=MenuExpanded>
<FluentNavMenuGroup Id="Group1" Text="Item 1" @bind-Expanded=Item1Expanded Icon="@(new Icons.Regular.Size24.LeafOne())">
<FluentNavMenuLink Text="Item 1.1" Icon="@(new Icons.Regular.Size24.LeafOne())" @bind-Selected=Item1Point1Selected />
<FluentNavMenuLink Text="Item 1.2" Icon="@(new Icons.Regular.Size24.LeafTwo())" @bind-Selected=Item1Point2Selected />
<FluentNavMenuGroup Id="Group1" Text="Item 1" @bind-Expanded=Item1Expanded Icon="@(new Icons.Regular.Size24.LeafOne())" Href="/NavMenu">
<FluentNavMenuLink Text="Item 1.1" Icon="@(new Icons.Regular.Size24.LeafOne())" @bind-Selected=Item1Point1Selected Href="/NavMenu" />
<FluentNavMenuLink Text="Item 1.2" Icon="@(new Icons.Regular.Size24.LeafTwo())" @bind-Selected=Item1Point2Selected Href="/NavMenu" />
</FluentNavMenuGroup>
<FluentNavMenuGroup Id="Group2" Text="Item 2" @bind-Expanded=Item2Expanded Icon="@(new Icons.Regular.Size24.LeafTwo())">
<FluentNavMenuLink Text="Item 2.1" Icon="@(new Icons.Regular.Size24.LeafOne())" @bind-Selected=Item2Point1Selected />
<FluentNavMenuLink Text="Item 2.2" Icon="@(new Icons.Regular.Size24.LeafTwo())" @bind-Selected=Item2Point2Selected />
<FluentNavMenuGroup Id="Group2" Text="Item 2" @bind-Expanded=Item2Expanded Icon="@(new Icons.Regular.Size24.LeafTwo())" Href="/NavMenu">
<FluentNavMenuLink Text="Item 2.1" Icon="@(new Icons.Regular.Size24.LeafOne())" @bind-Selected=Item2Point1Selected Href="/NavMenu" />
<FluentNavMenuLink Text="Item 2.2" Icon="@(new Icons.Regular.Size24.LeafTwo())" @bind-Selected=Item2Point2Selected Href="/NavMenu" />
</FluentNavMenuGroup>
</FluentNavMenu>
<FluentStack Orientation="Orientation.Vertical">
Expand Down
50 changes: 25 additions & 25 deletions examples/Demo/Shared/Pages/NavMenu/Examples/NavMenuDefault.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,28 +7,28 @@
<FluentStack Orientation="Orientation.Horizontal" >
<!-- Menu with sub-items and icons -->
<FluentNavMenu Collapsible="false">
<FluentNavMenuLink Text="Item 1" Icon="@(new Icons.Regular.Size24.Home())" />
<FluentNavMenuLink Text="Item 2" />
<FluentNavMenuGroup Text="Item 3" >
<FluentNavMenuLink Text="Item 3.1" Icon="@(new Icons.Regular.Size24.LeafOne())" />
<FluentNavMenuLink Text="Item 3.2" Icon="@(new Icons.Regular.Size24.LeafTwo())" />
<FluentNavMenuLink Text="Item 1" Icon="@(new Icons.Regular.Size24.Home())" Href="/NavMenu" />
<FluentNavMenuLink Text="Item 2" Href="/NavMenu" />
<FluentNavMenuGroup Text="Item 3" Href="/NavMenu">
<FluentNavMenuLink Text="Item 3.1" Icon="@(new Icons.Regular.Size24.LeafOne())" Href="/NavMenu" />
<FluentNavMenuLink Text="Item 3.2" Icon="@(new Icons.Regular.Size24.LeafTwo())" Href="/NavMenu" />
</FluentNavMenuGroup>
<FluentNavMenuGroup Text="Item 4" @onclick="OnClick" >
<FluentNavMenuLink Text="Item 4.1" @onclick="OnClick" />
<FluentNavMenuLink Text="Item 4.2" @onclick="OnClick" Icon="@(new Icons.Regular.Size24.LeafOne())" />
<FluentNavMenuGroup Text="Item 4" @onclick="OnClick" Href="/NavMenu">
<FluentNavMenuLink Text="Item 4.1" @onclick="OnClick" Href="/NavMenu" />
<FluentNavMenuLink Text="Item 4.2" @onclick="OnClick" Icon="@(new Icons.Regular.Size24.LeafOne())" Href="/NavMenu" />
</FluentNavMenuGroup>
<FluentNavMenuGroup Text="Item 5" @onclick="OnClick" >
<FluentNavMenuLink Text="Item 5.1" @onclick="OnClick" Icon="@(new Icons.Regular.Size24.LeafTwo())" />
<FluentNavMenuGroup @onclick="OnClick" Text="Item 5.2">
<FluentNavMenuLink Text="Item 5.2.1" @onclick="OnClick" />
<FluentNavMenuLink Text="Item 5.2.2" @onclick="OnClick" />
<FluentNavMenuGroup Text="Item 5" @onclick="OnClick" Href="/NavMenu">
<FluentNavMenuLink Text="Item 5.1" @onclick="OnClick" Icon="@(new Icons.Regular.Size24.LeafTwo())" Href="/NavMenu" />
<FluentNavMenuGroup @onclick="OnClick" Text="Item 5.2" Href="/NavMenu">
<FluentNavMenuLink Text="Item 5.2.1" @onclick="OnClick" Href="/NavMenu" />
<FluentNavMenuLink Text="Item 5.2.2" @onclick="OnClick" Href="/NavMenu" />
</FluentNavMenuGroup>
<FluentNavMenuGroup @onclick="OnClick" Text="Item 5.3">
<FluentNavMenuLink Text="Item 5.3.1" @onclick="OnClick" Icon="@(new Icons.Regular.Size24.LeafOne())" />
<FluentNavMenuLink Text="Item 5.3.2" @onclick="OnClick" />
<FluentNavMenuGroup @onclick="OnClick" Text="Item 5.3" Href="/NavMenu">
<FluentNavMenuLink Text="Item 5.3.1" @onclick="OnClick" Icon="@(new Icons.Regular.Size24.LeafOne())" Href="/NavMenu" />
<FluentNavMenuLink Text="Item 5.3.2" @onclick="OnClick" Href="/NavMenu" />
</FluentNavMenuGroup>
</FluentNavMenuGroup>
<FluentNavMenuGroup @onclick="OnClick" Text="Item with Href" >
<FluentNavMenuGroup @onclick="OnClick" Text="Items with Href">
<FluentNavMenuLink Text="Go to Bing" @onclick="OnClick" Icon="@(new Icons.Regular.Size24.LeafOne())" Href="https://bing.com" />
<FluentNavMenuLink Text="Go to home page" @onclick="OnClick" Icon="@(new Icons.Regular.Size24.Home())" Href="/" />
</FluentNavMenuGroup>
Expand All @@ -37,18 +37,18 @@

<!-- Menu with icons -->
<FluentNavMenu>
<FluentNavMenuLink Text="Item 1" @onclick="OnClick" Icon="@(new Icons.Regular.Size24.Home())" />
<FluentNavMenuLink Text="Item 2" @onclick="OnClick" />
<FluentNavMenuLink Text="Item 3" @onclick="OnClick" Icon="@(new Icons.Regular.Size24.LeafOne())" />
<FluentNavMenuLink Text="Item 4" @onclick="OnClick" />
<FluentNavMenuLink Text="Item 1" @onclick="OnClick" Icon="@(new Icons.Regular.Size24.Home())" Href="/NavMenu" />
<FluentNavMenuLink Text="Item 2" @onclick="OnClick" Href="/NavMenu" />
<FluentNavMenuLink Text="Item 3" @onclick="OnClick" Icon="@(new Icons.Regular.Size24.LeafOne())" Href="/NavMenu" />
<FluentNavMenuLink Text="Item 4" @onclick="OnClick" Href="/NavMenu" />
</FluentNavMenu>

<!-- Menu simple -->
<FluentNavMenu>
<FluentNavMenuLink Text="Item 1" @onclick="OnClick" />
<FluentNavMenuLink Text="Item 2" @onclick="OnClick" />
<FluentNavMenuLink Text="Item 3" @onclick="OnClick" />
<FluentNavMenuLink Text="Item 4" @onclick="OnClick" />
<FluentNavMenuLink Text="Item 1" @onclick="OnClick" Href="/NavMenu" />
<FluentNavMenuLink Text="Item 2" @onclick="OnClick" Href="/NavMenu" />
<FluentNavMenuLink Text="Item 3" @onclick="OnClick" Href="/NavMenu" />
<FluentNavMenuLink Text="Item 4" @onclick="OnClick" Href="/NavMenu" />
</FluentNavMenu>

</FluentStack>
Expand Down
2 changes: 1 addition & 1 deletion src/Core/Components/NavMenu/FluentNavMenu.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
<CascadingValue Value="@_hasChildIcons" Name="NavMenuItemSiblingHasIcon">
<FluentTreeView Class="@ClassValue"
Style="@StyleValue"
CurrentSelected="@_selectedTreeItem"
CurrentSelected="@_currentlySelectedTreeItem"
CurrentSelectedChanged="@HandleCurrentSelectedChangedAsync">
@if (Collapsible)
{
Expand Down
Loading