diff --git a/examples/Demo/Shared/Microsoft.FluentUI.AspNetCore.Components.xml b/examples/Demo/Shared/Microsoft.FluentUI.AspNetCore.Components.xml
index 04208eaaff..5fa60ae2a4 100644
--- a/examples/Demo/Shared/Microsoft.FluentUI.AspNetCore.Components.xml
+++ b/examples/Demo/Shared/Microsoft.FluentUI.AspNetCore.Components.xml
@@ -2141,6 +2141,11 @@
             <param name="index">The column index whose options UI is to be displayed.</param>
             <returns>A <see cref="T:System.Threading.Tasks.Task"/> representing the completion of the operation.</returns>
         </member>
+        <member name="M:Microsoft.FluentUI.AspNetCore.Components.FluentDataGrid`1.CloseColumnOptionsAsync">
+            <summary>
+            Closes the <see cref="P:Microsoft.FluentUI.AspNetCore.Components.ColumnBase`1.ColumnOptions"/> UI that was previously displayed.
+            </summary>
+        </member>
         <member name="M:Microsoft.FluentUI.AspNetCore.Components.FluentDataGrid`1.ShowColumnResizeAsync(Microsoft.FluentUI.AspNetCore.Components.ColumnBase{`0})">
             <summary>
             Displays the column resize UI for the specified column, closing any other column
diff --git a/examples/Demo/Shared/Pages/DataGrid/Examples/DataGridTypical.razor b/examples/Demo/Shared/Pages/DataGrid/Examples/DataGridTypical.razor
index 29f24153a3..362eea50d8 100644
--- a/examples/Demo/Shared/Pages/DataGrid/Examples/DataGridTypical.razor
+++ b/examples/Demo/Shared/Pages/DataGrid/Examples/DataGridTypical.razor
@@ -4,7 +4,8 @@
 <p>Remove the parameter completely to get the original behavior</p>
 
 <div style="height: 380px; overflow-x:auto; display:flex;">
-    <FluentDataGrid Items="@FilteredItems"
+    <FluentDataGrid @ref="grid"
+                    Items="@FilteredItems"
                     ResizableColumns=true
                     ResizeType="DataGridResizeType.Discrete"
                     GridTemplateColumns="0.3fr 1fr 0.2fr 0.2fr 0.2fr 0.2fr"
@@ -19,7 +20,7 @@
         <PropertyColumn Property="@(c => c.Name)" Sortable="true" Filtered="!string.IsNullOrWhiteSpace(nameFilter)" Tooltip="true" Title="Name of the country">
             <ColumnOptions>
                 <div class="search-box">
-                    <FluentSearch Autofocus=true @bind-Value=nameFilter @oninput="HandleCountryFilter" @bind-Value:after="HandleClear" Placeholder="Country name..." Style="width: 100%;" Label="Filter" />
+                    <FluentSearch Autofocus=true @bind-Value=nameFilter @oninput="HandleCountryFilter" @onkeydown="HandleCloseFilterAsync" @bind-Value:after="HandleClear" Placeholder="Country name..." Style="width: 100%;" Label="Filter" />
                 </div>
             </ColumnOptions>
         </PropertyColumn>
@@ -57,6 +58,7 @@
 </FluentSwitch>
 
 @code {
+    FluentDataGrid<Country>? grid;
     bool _clearItems = false;
     IQueryable<Country>? items;
     PaginationState pagination = new PaginationState { ItemsPerPage = 10 };
@@ -117,6 +119,18 @@
         }
     }
 
+    private async Task HandleCloseFilterAsync(KeyboardEventArgs args)
+    {
+        if (args.Key == "Escape")
+        {
+            nameFilter = string.Empty;
+        }
+        if (args.Key == "Enter" && grid is not null)
+        {
+            await grid.CloseColumnOptionsAsync();
+        }
+    }
+
     private async Task ToggleItemsAsync()
     {
         if (_clearItems)
diff --git a/examples/Demo/Shared/Pages/DataGrid/Pages/DataGridTypicalPage.razor b/examples/Demo/Shared/Pages/DataGrid/Pages/DataGridTypicalPage.razor
index c695322ada..f2a8a814a0 100644
--- a/examples/Demo/Shared/Pages/DataGrid/Pages/DataGridTypicalPage.razor
+++ b/examples/Demo/Shared/Pages/DataGrid/Pages/DataGridTypicalPage.razor
@@ -18,5 +18,9 @@
             <code>TooltipText</code> is a lambda function that takes the current item as input and returns the text to show in the tooltip (and <code>aria-label</code>).
             Look at the Razor tab to see how this is done and how it can be customized.
         </p>
+        <p>
+            The Country filter option can be used to quickly filter the list of countries shown. Pressing the ESC key just closes the option popup without changing the filtering currently being used.
+            Pressing enter finishes the filter action by the current input to filter on and closes the option popup.
+        </p>
     </Description>
 </DemoSection>
diff --git a/src/Core/Components/DataGrid/FluentDataGrid.razor.cs b/src/Core/Components/DataGrid/FluentDataGrid.razor.cs
index a33f566796..630a1ed521 100644
--- a/src/Core/Components/DataGrid/FluentDataGrid.razor.cs
+++ b/src/Core/Components/DataGrid/FluentDataGrid.razor.cs
@@ -635,6 +635,16 @@ public Task ShowColumnOptionsAsync(int index)
         return (index >= 0 && index < _columns.Count) ? ShowColumnOptionsAsync(_columns[index]) : Task.CompletedTask;
     }
 
+    /// <summary>
+    /// Closes the <see cref="ColumnBase{TGridItem}.ColumnOptions"/> UI that was previously displayed.
+    /// </summary>
+    public Task CloseColumnOptionsAsync()
+    {
+        _displayOptionsForColumn = null;
+        StateHasChanged();
+        return Task.CompletedTask;
+    }
+
     /// <summary>
     /// Displays the column resize UI for the specified column, closing any other column
     /// resize UI that was previously displayed.