Restore OnRowFocus and OnCellFocus for DataGrid (#3097)

Co-authored-by: Denis Voituron <[email protected]>
microsoft · Dec 25, 2024 · eb5cd26 · eb5cd26
1 parent 07eda9f
commit eb5cd26
Show file tree

Hide file tree

Showing 6 changed files with 28 additions and 20 deletions.
diff --git a/examples/Demo/Shared/Pages/DataGrid/Examples/DataGridTemplateColumns2.razor b/examples/Demo/Shared/Pages/DataGrid/Examples/DataGridTemplateColumns2.razor
@@ -4,7 +4,9 @@
     GridTemplateColumns="1fr 1fr"
     TGridItem=SampleGridData
     OnRowClick="HandleRowClick"
+    OnRowFocus="HandleRowFocus"
     OnCellClick="HandleCellClick"
+    OnCellFocus="HandleCellFocus"
     RowSize="@DataGridRowSize.Medium">
     <TemplateColumn Title="Name">
         <FluentTextField @bind-Value="@context!.Name"/>
@@ -37,12 +39,22 @@
     };
 
     private void HandleRowClick(FluentDataGridRow<SampleGridData> row)
+    {
+        DemoLogger.WriteLine($"Row clicked: {row.RowIndex}");
+    }
+
+    private void HandleRowFocus(FluentDataGridRow<SampleGridData> row)
     {
         DemoLogger.WriteLine($"Row focused: {row.RowIndex}");
     }
 
     private void HandleCellClick(FluentDataGridCell<SampleGridData> cell)
     {
-        DemoLogger.WriteLine($"Cell focused: {cell.GridColumn}");
+        DemoLogger.WriteLine($"Cell clicked: {cell.GridColumn}");
+    }
+
+    private void HandleCellFocus(FluentDataGridCell<SampleGridData> cell)
+    {
+        DemoLogger.WriteLine($"Cell focused : {cell.GridColumn}");
     }
 }
diff --git a/src/Core/Components/DataGrid/FluentDataGrid.razor.cs b/src/Core/Components/DataGrid/FluentDataGrid.razor.cs
@@ -185,6 +185,7 @@ public partial class FluentDataGrid<TGridItem> : FluentComponentBase, IHandleEve
 
     /// <summary>
     /// Gets or sets a callback when a row is focused.
+    /// As of 4.11 a row is a tr element with a 'display: contents'. Browsers can not focus such elements currently, but work is underway to fix that.
     /// </summary>
     [Parameter]
     public EventCallback<FluentDataGridRow<TGridItem>> OnRowFocus { get; set; }
@@ -920,18 +921,6 @@ private void SaveStateToQueryString()
         NavigationManager.NavigateTo(NavigationManager.GetUriWithQueryParameters(stateParams), replace: true);
     }
 
-    private async Task HandleOnRowFocusAsync(DataGridRowFocusEventArgs args)
-    {
-        var rowId = args.RowId;
-        if (_internalGridContext.Rows.TryGetValue(rowId!, out var row))
-        {
-            if (row != null && row.RowType == DataGridRowType.Default)
-            {
-                await OnRowFocus.InvokeAsync(row);
-            }
-        }
-    }
-
     public async Task OnKeyDownAsync(FluentKeyCodeEventArgs args)
     {
         if (args.ShiftKey == true && args.Key == KeyCode.KeyR)

diff --git a/src/Core/Components/DataGrid/FluentDataGridCell.razor b/src/Core/Components/DataGrid/FluentDataGridCell.razor
@@ -11,6 +11,7 @@
         tabindex="0"
         @onkeydown="@HandleOnCellKeyDownAsync"
         @onclick="@HandleOnCellClickAsync"
+        @onfocus="@HandleOnCellFocusAsync"
         @attributes="AdditionalAttributes">
         @ChildContent
     </td>
@@ -23,6 +24,7 @@ else
         @oncontextmenu:preventDefault="true"
         @onkeydown="@HandleOnCellKeyDownAsync"
         @onclick="@HandleOnCellClickAsync"
+        @onfocus="@HandleOnCellFocusAsync"
         @attributes="AdditionalAttributes">
         @ChildContent
     </th>

diff --git a/src/Core/Components/DataGrid/FluentDataGridCell.razor.cs b/src/Core/Components/DataGrid/FluentDataGridCell.razor.cs
@@ -100,6 +100,14 @@ internal async Task HandleOnCellClickAsync()
         }
     }
 
+    internal async Task HandleOnCellFocusAsync()
+    {
+        if (CellType == DataGridCellType.Default)
+        {
+            await Grid.OnCellFocus.InvokeAsync(this);
+        }
+    }
+
     internal async Task HandleOnCellKeyDownAsync(KeyboardEventArgs e)
     {
         if (!SelectColumn<TGridItem>.KEYBOARD_SELECT_KEYS.Contains(e.Code))

diff --git a/src/Core/Components/DataGrid/FluentDataGridRow.razor b/src/Core/Components/DataGrid/FluentDataGridRow.razor
@@ -11,6 +11,7 @@
         @onkeydown="@(e => HandleOnRowKeyDownAsync(RowId, e))"
         @onclick="@(e => HandleOnRowClickAsync(RowId))"
         @ondblclick="@(e => HandleOnRowDoubleClickAsync(RowId))"
+        @onfocus="@HandleOnRowFocusAsync"
         @attributes="AdditionalAttributes">
         @ChildContent
     </tr>

diff --git a/src/Core/Components/DataGrid/FluentDataGridRow.razor.cs b/src/Core/Components/DataGrid/FluentDataGridRow.razor.cs
@@ -93,15 +93,11 @@ internal void Unregister(FluentDataGridCell<TGridItem> cell)
         cells.Remove(cell.CellId!);
     }
 
-    private async Task HandleOnCellFocusAsync(DataGridCellFocusEventArgs args)
+    internal async Task HandleOnRowFocusAsync()
     {
-        var cellId = args.CellId;
-        if (cells.TryGetValue(cellId!, out var cell))
+        if (Grid.OnRowFocus.HasDelegate)
         {
-            if (cell != null && cell.CellType == DataGridCellType.Default)
-            {
-                await Grid.OnCellFocus.InvokeAsync(cell);
-            }
+            await Grid.OnRowFocus.InvokeAsync(this);
         }
     }