[Blazor] Add public method to QuickGrid to close column options UI (#57904)

* Adds a public method to QuickGrid to close the column options UI

Author: matthetherington

src/Components/QuickGrid/Microsoft.AspNetCore.Components.QuickGrid/src/PublicAPI.Unshipped.txt

@@ -1,3 +1,4 @@
 #nullable enable
+Microsoft.AspNetCore.Components.QuickGrid.QuickGrid<TGridItem>.CloseColumnOptionsAsync() -> System.Threading.Tasks.Task!
 Microsoft.AspNetCore.Components.QuickGrid.QuickGrid<TGridItem>.RowClass.get -> System.Func<TGridItem, string?>?
-Microsoft.AspNetCore.Components.QuickGrid.QuickGrid<TGridItem>.RowClass.set -> void
+Microsoft.AspNetCore.Components.QuickGrid.QuickGrid<TGridItem>.RowClass.set -> void

src/Components/QuickGrid/Microsoft.AspNetCore.Components.QuickGrid/src/QuickGrid.razor

@@ -10,7 +10,7 @@
         @{ FinishCollectingColumns(); }
         <ColumnsCollectedNotifier TGridItem="TGridItem" />
 
-        <table theme="@Theme" aria-rowcount="@(_ariaBodyRowCount + 1)" @ref="_tableReference" @onclosecolumnoptions="CloseColumnOptions" @attributes="AdditionalAttributes" class="@GridClass()">
+        <table theme="@Theme" aria-rowcount="@(_ariaBodyRowCount + 1)" @ref="_tableReference" @onclosecolumnoptions="CloseColumnOptionsAsync" @attributes="AdditionalAttributes" class="@GridClass()">
             <thead>
                 <tr>
                     @_renderColumnHeaders

src/Components/QuickGrid/Microsoft.AspNetCore.Components.QuickGrid/src/QuickGrid.razor.cs

@@ -277,6 +277,16 @@ public Task ShowColumnOptionsAsync(ColumnBase<TGridItem> column)
         return 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>
     /// Instructs the grid to re-fetch and render the current data from the supplied data source
     /// (either <see cref="Items"/> or <see cref="ItemsProvider"/>).
@@ -445,9 +455,4 @@ public async ValueTask DisposeAsync()
             // the client disconnected. This is not an error.
         }
     }
-
-    private void CloseColumnOptions()
-    {
-        _displayOptionsForColumn = null;
-    }
 }

src/Components/test/E2ETest/Tests/QuickGridTest.cs

@@ -148,4 +148,46 @@ public void RowClassApplied()
             Assert.Fail("No row found for Julie to highlight.");
         }
     }
+
+    [Fact]
+    public void CanOpenColumnOptions()
+    {
+        var grid = app.FindElement(By.CssSelector("#grid > table"));
+        var firstNameColumnOptionsButton = grid.FindElement(By.CssSelector("thead > tr > th:nth-child(2) > div > button[title=\"Column options\"]"));
+
+        firstNameColumnOptionsButton.Click();
+
+        var firstNameSearchSelector = "#grid > table > thead > tr > th:nth-child(2) input[type=search]";
+        Browser.Exists(By.CssSelector(firstNameSearchSelector));
+    }
+
+    [Fact]
+    public void CanCloseColumnOptionsByBlurring()
+    {
+        var grid = app.FindElement(By.CssSelector("#grid > table"));
+        var firstNameColumnOptionsButton = grid.FindElement(By.CssSelector("thead > tr > th:nth-child(2) > div > button[title=\"Column options\"]"));
+
+        firstNameColumnOptionsButton.Click();
+
+        // Click outside the column options to close
+        grid.Click();
+
+        var firstNameSearchSelector = "#grid > table > thead > tr > th:nth-child(2) input[type=search]";
+        Browser.DoesNotExist(By.CssSelector(firstNameSearchSelector));
+    }
+
+    [Fact]
+    public void CanCloseColumnOptionsByCloseColumnOptionsAsync()
+    {
+        var grid = app.FindElement(By.CssSelector("#grid > table"));
+        var firstNameColumnOptionsButton = grid.FindElement(By.CssSelector("thead > tr > th:nth-child(2) > div > button[title=\"Column options\"]"));
+
+        firstNameColumnOptionsButton.Click();
+
+        // Click the button inside the column options popup to close, which calls QuickGrid.CloseColumnOptionsAsync
+        grid.FindElement(By.CssSelector("#close-column-options")).Click();
+
+        var firstNameSearchSelector = "#grid > table > thead > tr > th:nth-child(2) input[type=search]";
+        Browser.DoesNotExist(By.CssSelector(firstNameSearchSelector));
+    }
 }

src/Components/test/testassets/BasicTestApp/QuickGridTest/SampleQuickGridComponent.razor

@@ -3,13 +3,14 @@
 <h3>Sample QuickGrid Component</h3>
 
 <div id="grid">
-    <QuickGrid Items="@FilteredPeople" Pagination="@pagination" RowClass="HighlightJulie" custom-attrib="somevalue" class="custom-class-attrib">
+    <QuickGrid @ref="@quickGridRef" Items="@FilteredPeople" Pagination="@pagination" RowClass="HighlightJulie" custom-attrib="somevalue" class="custom-class-attrib">
         <PropertyColumn Property="@(p => p.PersonId)" Sortable="true" />
         <PropertyColumn Property="@(p => p.firstName)" Sortable="true">
             <ColumnOptions>
                 <div class="search-box">
                     <input type="search" autofocus @bind="firstNameFilter" @bind:event="oninput" placeholder="First name..." />
                 </div>
+                <button type="button" id="close-column-options" @onclick="@(() => quickGridRef.CloseColumnOptionsAsync())">Close Column Options</button>
             </ColumnOptions>
         </PropertyColumn>
         <PropertyColumn Property="@(p => p.lastName)" Sortable="true" />
@@ -23,6 +24,7 @@
     record Person(int PersonId, string firstName, string lastName, DateOnly BirthDate);
     PaginationState pagination = new PaginationState { ItemsPerPage = 10 };
     string firstNameFilter;
+    QuickGrid<Person> quickGridRef;
 
     int ComputeAge(DateOnly birthDate)
         => DateTime.Now.Year - birthDate.Year - (birthDate.DayOfYear < DateTime.Now.DayOfYear ? 0 : 1);