Popup AutoFocusFirstElement property added

Popup demos updated.
radzenhq · Oct 1, 2024 · b3de937 · b3de937
1 parent 1d869e8
commit b3de937
Show file tree

Hide file tree

Showing 4 changed files with 94 additions and 9 deletions.
diff --git a/Radzen.Blazor/Rendering/Popup.razor b/Radzen.Blazor/Rendering/Popup.razor
@@ -12,6 +12,12 @@
     [Parameter]
     public bool Lazy { get; set; }
 
+    /// <summary>
+    /// Gets or sets a value indicating whether to focus the first focusable HTML element. Set to <c>true</c> by default.
+    /// </summary>
+    [Parameter]
+    public bool AutoFocusFirstElement { get; set; } = true;
+
     [Parameter]
     public RenderFragment ChildContent { get; set; }
 
@@ -32,7 +38,7 @@
         if (open)
         {
             await Open.InvokeAsync(null);
-            await JSRuntime.InvokeVoidAsync("Radzen.openPopup", target, GetId(), false, null, null, null, Reference, nameof(OnClose), true, true, disableSmartPosition);
+            await JSRuntime.InvokeVoidAsync("Radzen.openPopup", target, GetId(), false, null, null, null, Reference, nameof(OnClose), true, AutoFocusFirstElement, disableSmartPosition);
         }
         else
         {

diff --git a/RadzenBlazorDemos/Pages/PopupConfig.razor b/RadzenBlazorDemos/Pages/PopupConfig.razor
@@ -4,14 +4,26 @@
 @using Radzen.Blazor.Rendering
 
 @inherits DbContextPage
-@inject IJSRuntime JSRuntime
+
+<style type="text/css">
+    .my-popup {
+        display: none;
+        position: absolute;
+        overflow: hidden;
+        height: 360px;
+        width: 600px;
+        border: var(--rz-panel-border);
+        background-color: var(--rz-panel-background-color);
+        box-shadow: var(--rz-panel-shadow);
+        border-radius: var(--rz-border-radius)
+    }
+ </style>
 
 <div class="rz-p-12 rz-text-align-center">
     <RadzenButton @ref=button Text="@(orderId != null ? "Selected order: " + orderId.ToString() : "Select order")" Click="@(args => popup.ToggleAsync(button.Element))" />
 </div>
 
-<Popup @ref=popup Lazy=true Open="@OnOpen"
-    Style="display: none; position: absolute; overflow: hidden; height: 360px; width: 600px; border: var(--rz-panel-border); background-color: var(--rz-panel-background-color); box-shadow: var(--rz-panel-shadow); border-radius: var(--rz-border-radius)">
+<Popup @ref=popup Lazy=true class="my-popup">
     <RadzenStack Orientation="Orientation.Vertical" Gap="1rem" class="rz-h-100 rz-p-4">
     <RadzenTextBox id="search" Placeholder="Type to search..." @oninput=@(args => searchString = $"{args.Value}") Value="@searchString" />
     <RadzenDataList @ref=dataList AllowVirtualization=true Data="@orders" Style="flex: 1; --rz-datalist-padding: 0.5rem 0; --rz-datalist-item-margin-inline: 0; overflow:auto;">
@@ -68,9 +80,4 @@
         orderId = order.OrderID; 
         await popup.CloseAsync();
     }
-
-    async Task OnOpen()
-    {
-        await JSRuntime.InvokeVoidAsync("eval", "setTimeout(function(){ document.getElementById('search').focus(); }, 200)"); 
-    }
 }
diff --git a/RadzenBlazorDemos/Pages/PopupDataGrid.razor b/RadzenBlazorDemos/Pages/PopupDataGrid.razor
@@ -0,0 +1,64 @@
+@using RadzenBlazorDemos.Data
+@using RadzenBlazorDemos.Models.Northwind
+@using Microsoft.EntityFrameworkCore
+@using Radzen.Blazor.Rendering
+
+@inherits DbContextPage
+
+<style type="text/css">
+    .my-popup {
+        display: none;
+        position: absolute;
+        overflow: hidden;
+        height: 360px;
+        width: 600px;
+        border: var(--rz-panel-border);
+        background-color: var(--rz-panel-background-color);
+        box-shadow: var(--rz-panel-shadow);
+        border-radius: var(--rz-border-radius)
+    }
+ </style>
+
+<div class="rz-p-12 rz-text-align-center">
+    <RadzenTextBox @ref=textBox Value="@customerId" @oninput=@(args => customerId = value = $"{args.Value}")
+        @onclick="@(args => popup.ToggleAsync(textBox.Element))" />
+</div>
+
+<Popup @ref=popup Lazy=true AutoFocusFirstElement="false" class="my-popup">
+    <RadzenDataGrid TItem="Customer" Data="@customers" RowSelect="@RowSelect" AllowVirtualization="true" AllowSorting="true" Style="height:360px">
+        <Columns>
+            <RadzenDataGridColumn Property="CustomerID" Title="CustomerID" />
+            <RadzenDataGridColumn Property="CompanyName" Title="CompanyName" />
+            <RadzenDataGridColumn Property="ContactName" Title="ContactName" />
+            <RadzenDataGridColumn Property="City" Title="City" />
+            <RadzenDataGridColumn Property="Country" Title="Country" />
+        </Columns>
+    </RadzenDataGrid>
+</Popup>
+
+@code {
+    RadzenTextBox textBox;
+    string value = "";
+    string customerId;
+    IEnumerable<Customer> customers;
+    Popup popup;
+
+    protected override async Task OnInitializedAsync()
+    {
+        await base.OnInitializedAsync();
+
+        customers = dbContext.Customers
+            .Where(c => c.CustomerID.ToString().Contains(value)
+                || c.CompanyName.ToLowerInvariant().Contains(value)
+                    || c.ContactName.ToLowerInvariant().Contains(value)
+                        || c.City.ToLowerInvariant().Contains(value)
+                            || c.Country.ToLowerInvariant().Contains(value));
+    }
+
+    async Task RowSelect(Customer customer)
+    {
+        value = "";
+        customerId = customer.CustomerID;
+        await popup.CloseAsync();
+    }
+}
diff --git a/RadzenBlazorDemos/Pages/PopupPage.razor b/RadzenBlazorDemos/Pages/PopupPage.razor
@@ -10,3 +10,11 @@
 <RadzenExample ComponentName="Popup" Example="PopupConfig">
     <PopupConfig />
 </RadzenExample>
+
+<RadzenText Anchor="popup#datagrid" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
+    Popup for <strong>TextBox</strong> with <strong>DataGrid</strong>.
+</RadzenText>
+
+<RadzenExample ComponentName="Popup" Example="PopupDataGrid">
+    <PopupDataGrid />
+</RadzenExample>