Allow click on group of collapsed nav menu to trigger its action

src/Core/Components/NavMenu/FluentNavMenuGroup.razor

@@ -14,7 +14,8 @@
                          SelectedChanged="@HandleSelectedChangedAsync"
                          Expanded="@Expanded"
                          ExpandedChanged="@SetExpandedAsync"
-                         Text="@Text">
+                         Text="@Text"
+                         @onclickwithtargetid="@HandleClickAsync">
                 @if (HasIcon)
                 {
                     <FluentIcon Value="@Icon" Width="20px" Slot="start" />

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

@@ -90,7 +90,9 @@ void INavMenuItemsOwner.Unregister(FluentNavMenuItemBase child)
     protected internal override async ValueTask ExecuteAsync(NavMenuActionArgs args)
     {
         await base.ExecuteAsync(args);
-        if (Collapsed)
+
+        bool shouldExpand = Collapsed || NavMenu.Collapsed;
+        if (shouldExpand)
         {
             await SetExpandedAsync(true);
         }
@@ -104,6 +106,17 @@ protected internal override async ValueTask ExecuteAsync(NavMenuActionArgs args)
 
     private Task ToggleCollapsedAsync() => SetExpandedAsync(!Expanded);
 
+    private async Task HandleClickAsync(MouseWithTargetIdEventArgs args)
+    {
+        if (args.TargetId != Id || args.Button != 0)
+        {
+            return;
+        }
+
+        var navMenuActionArgs = new NavMenuActionArgs(this);
+        await ExecuteAsync(navMenuActionArgs);
+    }
+
     private async Task SetExpandedAsync(bool value)
     {
         if (value != Expanded)

src/Core/Events/EventHandlers.cs

@@ -19,6 +19,7 @@ namespace Microsoft.Fast.Components.FluentUI;
 [EventHandler("onclosecolumnoptions", typeof(EventArgs), enableStopPropagation: true, enablePreventDefault: true)]
 [EventHandler("ontooltipdismiss", typeof(EventArgs), enableStopPropagation: true, enablePreventDefault: true)]
 [EventHandler("onsizechanged", typeof(EventArgs), enableStopPropagation: true, enablePreventDefault: true)]
+[EventHandler("onclickwithtargetid", typeof(MouseWithTargetIdEventArgs), enableStopPropagation: true, enablePreventDefault:true)]
 public static class EventHandlers
 {
 }

src/Core/Events/MouseWithTargetIdEventArgs.cs

@@ -0,0 +1,15 @@
+using Microsoft.AspNetCore.Components.Web;
+
+namespace Microsoft.Fast.Components.FluentUI;
+
+/// <summary>
+/// Supplies information about a mouse event that is being raised, including the
+/// HTML id of the element clicked
+/// </summary>
+public class MouseWithTargetIdEventArgs : MouseEventArgs
+{
+    /// <summary>
+    /// The HTML id of the element clicked.
+    /// </summary>
+    public string? TargetId { get; set; }
+}

src/Core/wwwroot/Microsoft.Fast.Components.FluentUI.lib.module.js

@@ -4,6 +4,28 @@ export function afterStarted(Blazor) {
 
     customElements.define("split-panels", SplitPanels);
 
+
+    Blazor.registerCustomEventType('clickwithtargetid', {
+        browserEventName: 'click',
+        createEventArgs: event => {
+            let id = event.target.attributes['id']?.value ?? null;
+            return {
+                button: event.button,
+                buttons: event.buttons,
+                clientX: event.clientX,
+                clientY: event.clientY,
+                screenX: event.screenX,
+                screenY: event.screenY,
+                detail: event.detail,
+                altKey: event.altKey,
+                ctrlKey: event.ctrlKey,
+                metaKey: event.metaKey,
+                shiftKey: event.shiftKey,
+                type: event.type,
+                targetId: id
+            };
+        }
+    });
     Blazor.registerCustomEventType('radiogroupclick', {
         browserEventName: 'click',
         createEventArgs: event => {