NavMenu / KeyCode optimizations

examples/Demo/Shared/Pages/MessageBar/Examples/MessageBarTimed.razor

@@ -49,7 +49,7 @@
             options.Body = MessageBarSamples.OneRandomMessage;
             options.Link = link;
             options.Timestamp = DateTime.Now;
-            options.Timeout = 3;
+            options.Timeout = 3000;
             options.Section = App.MESSAGES_NOTIFICATION_CENTER;
         });
     }
@@ -63,7 +63,7 @@
             options.Title = $"Simple message #{counter++}";
             options.Body = MessageBarSamples.OneRandomMessage;
             options.Link = link;
-            options.Timeout = 5;
+            options.Timeout = 5000;
             options.Timestamp = DateTime.Now;
             options.Section = App.MESSAGES_DIALOG;
         });
@@ -89,4 +89,4 @@
         IDialogReference dialog = await DialogService.ShowDialogAsync<SimpleDialog>(simplePerson, parameters);
         DialogResult? result = await dialog.Result;
     }
-}
+}

src/Core/Components/NavMenu/FluentNavGroup.razor

@@ -75,4 +75,4 @@
             </div>
         }
     }
-}
+}

src/Core/Components/NavMenu/FluentNavGroup.razor.cs

@@ -105,6 +105,10 @@ public FluentNavGroup()
 
     private async Task HandleExpanderKeyDownAsync(FluentKeyCodeEventArgs args)
     {
+        if (args.TargetId != Id)
+        {
+            return;
+        }
         Task handler = args.Key switch
         {
             KeyCode.Enter => SetExpandedAsync(!Expanded),

src/Core/Components/NavMenu/FluentNavMenu.razor

@@ -4,15 +4,13 @@
 {
     <FluentPageScript Src="./_content/Microsoft.FluentUI.AspNetCore.Components/Components/NavMenu/FluentNavMenu.razor.js"></FluentPageScript>
 }
-@if (@Collapsible)
-{
-    <FluentKeyCode Anchor="@Id" OnKeyDown="@HandleExpandCollapseKeyDownAsync" />
-}
 <div id="@Id" @ref="@Element" @attributes="AdditionalAttributes" class="@ClassValue" style="@StyleValue" aria-label="@(Collapsible ? null : @Title)" role="menu" aria-expanded="@Expanded">
     <CascadingValue Value="this" IsFixed="true">
         @if (Collapsible)
         {
-            <div aria-label="@Title"
+            <FluentKeyCode Anchor="expander" OnKeyDown="@HandleExpandCollapseKeyDownAsync" />
+            <div id="${@Id}-expander"
+                 aria-label="@Title"
                  aria-expanded="@(Expanded.ToAttributeValue())"
                  role="menuitem"
                  class="fluent-nav-item expander"

src/Core/Components/NavMenu/FluentNavMenu.razor.cs

@@ -6,7 +6,7 @@ namespace Microsoft.FluentUI.AspNetCore.Components;
 public partial class FluentNavMenu : FluentComponentBase
 {
     private const string WIDTH_COLLAPSED_MENU = "40px";
-
+    
     internal string? ClassValue => new CssBuilder("fluent-nav-menu")
         .AddClass(Class)
         .AddClass("collapsed", () => !Expanded)
@@ -80,6 +80,10 @@ public FluentNavMenu()
 
     private async Task HandleExpandCollapseKeyDownAsync(FluentKeyCodeEventArgs args)
     {
+        if (args.TargetId != $"{Id}-expander")
+        {
+            return;
+        }
         Task handler = args.Key switch
         {
             KeyCode.Enter => SetExpandedAsync(!Expanded),

src/Core/Components/NavMenu/FluentNavMenu.razor.js

@@ -4,8 +4,8 @@ export function onLoad() {
     for (let expander of document.getElementsByClassName("expander")) {
         if (expander) {
             const origStyle = expander.parentElement.style.cssText;
-            expander.addEventListener('click', (ev) => toggleMenuExpandedAsync(expander, origStyle, ev), true);
-            expander.addEventListener('keydown', (ev) => handleMenuExpanderKeyDownAsync(expander, origStyle, ev), true);
+            expander.addEventListener('click', (ev) => toggleMenuExpandedAsync(expander, origStyle, ev));
+            expander.addEventListener('keydown', (ev) => handleMenuExpanderKeyDownAsync(expander, origStyle, ev));
 
             mql.onchange = (e) => {
                 if (e.matches) {
@@ -22,17 +22,49 @@ export function onUpdate() {
 
 }
 
+export function onDispose() {
+    for (let expander of document.getElementsByClassName("expander")) {
+        if (expander) {
+            expander.removeEventListener('click', toggleMenuExpandedAsync);
+            expander.removeEventListener('keydown', handleMenuExpanderKeyDownAsync);
+        }
+    }
+    for (let element of document.getElementsByClassName("fluent-nav-group")) {
+        detachEventHandlers(element);
+    }
+}
+
 function attachEventHandlers(element) {
     let navlink = element.getElementsByClassName("fluent-nav-link")[0];
+    if (!navlink) {
+        return;
+    }
     if (!navlink.href) {
         navlink.addEventListener('click', () => toggleGroupExpandedAsync(element));
     }
     navlink.addEventListener('keydown', (ev) => handleExpanderKeyDownAsync(element, ev));
 
     let expandCollapseButton = element.getElementsByClassName("expand-collapse-button")[0];
+    if (!expandCollapseButton) {
+        return;
+    }
     expandCollapseButton.addEventListener('click', (ev) => toggleGroupExpandedAsync(element, navlink, ev));
 }
 
+function detachEventHandlers(element) {
+    let navlink = element.getElementsByClassName("fluent-nav-link")[0];
+    if (!navlink) {
+        return;
+    }
+    if (!navlink.href) {
+        navlink.removeEventListener('click', toggleGroupExpandedAsync);
+    }
+    navlink.removeEventListener('keydown', handleExpanderKeyDownAsync);
+
+    let expandCollapseButton = element.getElementsByClassName("expand-collapse-button")[0];
+    expandCollapseButton.removeEventListener('click', toggleGroupExpandedAsync);
+}
+
 function toggleMenuExpandedAsync(element, orig, event) {
 
     let parent = element.parentElement;