[DataGrid] Add UseMenuService parameter to override menu behavior (#3862)

* Initial work

* Restore IssueTester and undo other issue trials

* Fix multiple menus being shown because header button breaks through overlay

Author: vnbaaij

examples/Demo/Shared/Microsoft.FluentUI.AspNetCore.Components.xml

@@ -1966,6 +1966,13 @@
              If true, enables the new style of header cell that includes a button to display all column options through a menu.
             </summary>
         </member>
+        <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentDataGrid`1.UseMenuService">
+            <summary>
+            Use IMenuService to create the menu, if this service was injected.
+            This value must be defined before the component is rendered (you can't change it during the component lifecycle).
+            Default, true.
+            </summary>
+        </member>
         <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentDataGrid`1.ItemKey">
              <summary>
              Optionally defines a value for @key on each rendered row. Typically this should be used to specify a

examples/Demo/Shared/Pages/DataGrid/DataGridPage.razor

@@ -58,7 +58,7 @@
 <h2 id="sorting">Sorting</h2>
 <p>
     The DataGrid supports sorting by clicking on the column headers. The default sort direction is ascending. Clicking on the same column header again will toggle the sort direction.
-    A sort can be removed by right clicking on the header column (with exception of the default sort).
+    A sort can be removed by right clicking (or by pressing Shift+R) on the header column (with exception of the default sort).
 </p>
 
 <h2 id="styling">Row size</h2>

examples/Demo/Shared/Pages/DataGrid/Examples/DataGridCustomComparer.razor

@@ -18,12 +18,14 @@
     </FluentRadioGroup>
     <FluentSpacer Width="25" />
     <FluentCheckbox @bind-Value="@_showActionsMenu" Label="Use menu for column actions" />
+    <FluentCheckbox @bind-Value="@_useMenuService" Label="Use service for rendering menu" Disabled="!_showActionsMenu" />
 </FluentToolbar>
 <div style="height: 400px; overflow-x:auto; display:flex;">
     <FluentDataGrid Items="@FilteredItems"
                     ResizableColumns=true
                     ResizeType="@_resizeType"
                     HeaderCellAsButtonWithMenu="_showActionsMenu"
+                    UseMenuService="_useMenuService"
                     Pagination="@pagination"
                     TGridItem="Country"
                     OnRowFocus="HandleRowFocus"
@@ -75,6 +77,7 @@
     string nameFilter = string.Empty;
     DataGridResizeType? _resizeType = null;
     bool _showActionsMenu;
+    bool _useMenuService = true;
 
     GridSort<Country> rankSort = GridSort<Country>
         .ByDescending(x => x.Medals.Gold)

src/Core/Components/DataGrid/Columns/ColumnBase.razor

@@ -29,7 +29,7 @@
         {
             string? tooltip = Tooltip ? (HeaderTooltip ?? Title) : null;
 
-            <FluentKeyCode Only="new[] { KeyCode.Ctrl, KeyCode.Enter }" OnKeyDown="HandleKeyDown" class="keycapture" style="width: 100%;" StopPropagation="true" @oncontextmenu="@(() => Grid.RemoveSortByColumnAsync(this))">
+            <FluentKeyCode  Only="@(new[] { KeyCode.KeyR })"  OnKeyDown="HandleKeyDown" class="keycapture" style="width: 100%;" StopPropagation="true" @oncontextmenu="@(() => Grid.RemoveSortByColumnAsync(this))">
 
                 @if (AnyColumnActionEnabled)
                 {
@@ -63,7 +63,7 @@
                         </div>
                     </div>
                 }
-                <FluentMenu Anchor="@_columnId" @bind-Open="@_isMenuOpen" HorizontalViewportLock="false" HorizontalPosition="HorizontalPosition.End">
+                <FluentMenu @ref="@_menu" UseMenuService="@Grid.UseMenuService" Anchor="@_columnId" @bind-Open="@_isMenuOpen" HorizontalViewportLock="false" HorizontalPosition="HorizontalPosition.End">
                     @if (Sortable.HasValue ? Sortable.Value : IsSortableByDefault())
                     {
                         <FluentMenuItem OnClick="@(async () => await Grid.SortByColumnAsync(this))" @onkeydown="HandleSortMenuKeyDownAsync">

src/Core/Components/DataGrid/Columns/ColumnBase.razor.cs

@@ -19,6 +19,7 @@ public abstract partial class ColumnBase<TGridItem>
     private bool _isMenuOpen;
     private static readonly string[] KEYBOARD_MENU_SELECT_KEYS = ["Enter", "NumpadEnter"];
     private readonly string _columnId = Identifier.NewId();
+    private FluentMenu? _menu;
 
     [CascadingParameter]
     internal InternalGridContext<TGridItem> InternalGridContext { get; set; } = default!;
@@ -248,7 +249,7 @@ protected internal virtual Task OnCellKeyDownAsync(FluentDataGridCell<TGridItem>
 
     protected void HandleKeyDown(FluentKeyCodeEventArgs e)
     {
-        if (e.CtrlKey && e.Key == KeyCode.Enter)
+        if (e.ShiftKey && e.Key == KeyCode.KeyR)
         {
             Grid.RemoveSortByColumnAsync(this);
         }

src/Core/Components/DataGrid/FluentDataGrid.razor.cs

@@ -24,6 +24,7 @@ public partial class FluentDataGrid<TGridItem> : FluentComponentBase, IHandleEve
     private const string JAVASCRIPT_FILE = "./_content/Microsoft.FluentUI.AspNetCore.Components/Components/DataGrid/FluentDataGrid.razor.js";
     public const string EMPTY_CONTENT_ROW_CLASS = "empty-content-row";
     public const string LOADING_CONTENT_ROW_CLASS = "loading-content-row";
+    public List<FluentMenu> _menuReferences = [];
 
     /// <summary />
     [Inject]
@@ -148,6 +149,14 @@ public partial class FluentDataGrid<TGridItem> : FluentComponentBase, IHandleEve
     [Parameter]
     public bool HeaderCellAsButtonWithMenu { get; set; }
 
+    /// <summary>
+    /// Use IMenuService to create the menu, if this service was injected.
+    /// This value must be defined before the component is rendered (you can't change it during the component lifecycle).
+    /// Default, true.
+    /// </summary>
+    [Parameter]
+    public bool UseMenuService { get; set; } = true;
+
     /// <summary>
     /// Optionally defines a value for @key on each rendered row. Typically this should be used to specify a
     /// unique identifier, such as a primary key value, for each data item.

src/Core/Components/DataGrid/FluentDataGrid.razor.js

@@ -32,6 +32,9 @@ export function init(gridElement, autoFocus) {
         }
     }
     const keyDownHandler = event => {
+        if (document.activeElement.tagName.toLowerCase() != 'table' && document.activeElement.tagName.toLowerCase() != 'td' && document.activeElement.tagName.toLowerCase() != 'th') {
+            return;
+        }
         const columnOptionsElement = gridElement?.querySelector('.col-options');
         if (columnOptionsElement) {
             if (event.key === "Escape") {
@@ -64,7 +67,7 @@ export function init(gridElement, autoFocus) {
         }
 
         // check if start is a child of gridElement
-        if (start !== null && (gridElement.contains(start) || gridElement === start) && document.activeElement === start && document.activeElement.tagName.toLowerCase() !== 'fluent-text-field') {
+        if (start !== null && (gridElement.contains(start) || gridElement === start) && document.activeElement === start && document.activeElement.tagName.toLowerCase() !== 'fluent-text-field' && document.activeElement.tagName.toLowerCase() !== 'fluent-menu-item') {
             const idx = start.cellIndex;
 
             if (event.key === "ArrowUp") {
@@ -124,13 +127,13 @@ export function init(gridElement, autoFocus) {
 
     document.body.addEventListener('click', bodyClickHandler);
     document.body.addEventListener('mousedown', bodyClickHandler); // Otherwise it seems strange that it doesn't go away until you release the mouse button
-    document.body.addEventListener('keydown', keyDownHandler);
+    gridElement.addEventListener('keydown', keyDownHandler);
 
     return {
         stop: () => {
             document.body.removeEventListener('click', bodyClickHandler);
             document.body.removeEventListener('mousedown', bodyClickHandler);
-            document.body.removeEventListener('keydown', keyDownHandler);
+            gridElement.removeEventListener('keydown', keyDownHandler);
             delete grids[gridElement];
         }
     };

src/Core/Components/DataGrid/FluentDataGridCell.razor.cs

@@ -79,7 +79,7 @@ public partial class FluentDataGridCell<TGridItem> : FluentComponentBase
         .AddStyle("height", $"{(int)Grid.RowSize}px", () => !Grid.EffectiveLoadingValue && !Grid.Virtualize && !Grid.MultiLine && (Grid.Items is not null || Grid.ItemsProvider is not null))
         .AddStyle("height", "100%", Grid.MultiLine)
         .AddStyle("min-height", "44px", Owner.RowType != DataGridRowType.Default)
-        .AddStyle("z-index", ZIndex.DataGridHeaderPopup.ToString(), CellType == DataGridCellType.ColumnHeader && Grid._columns.Count > 0)
+        .AddStyle("z-index", ZIndex.DataGridHeaderPopup.ToString(), CellType == DataGridCellType.ColumnHeader && Grid._columns.Count > 0 && Grid.UseMenuService)
         .AddStyle(Owner.Style)
         .Build();