From b4283acc2e3f6f93723a45739aa7a9e33efdf471 Mon Sep 17 00:00:00 2001
From: Tsvetomir Hristov <106250052+Tsvetomir-Hr@users.noreply.github.com>
Date: Mon, 16 Jun 2025 12:04:16 +0300
Subject: [PATCH 1/2] docs(kb): add kb for automatically select
---
.../combobox-auto-select-on-blur.md | 109 ++++++++++++++++++
1 file changed, 109 insertions(+)
create mode 100644 knowledge-base/combobox-auto-select-on-blur.md
diff --git a/knowledge-base/combobox-auto-select-on-blur.md b/knowledge-base/combobox-auto-select-on-blur.md
new file mode 100644
index 0000000000..4780bd76c5
--- /dev/null
+++ b/knowledge-base/combobox-auto-select-on-blur.md
@@ -0,0 +1,109 @@
+---
+title: How to Automatically Select Preselected Item on Blur
+description: Learn how to configure the Telerik ComboBox for Blazor to automatically select the first matching item when the input loses focus.
+type: how-to
+page_title: How to Automatically Select Preselected Item on Blur
+slug: combobox-kb-autoselect-on-blur
+tags: telerik, blazor, combobox, blur, auto-select
+res_type: kb
+---
+
+## Environment
+
+
+
+
+ | Product |
+ ComboBox for Blazor |
+
+
+
+
+## Description
+
+The article asnwers to the following question:
+
+* How can I configure the ComboBox to automatically select the first matching item when the input loses focus (e.g., when the user tabs away or clicks outside)?
+* How do I auto-select a ComboBox item based on user input when focus is lost?
+* Can the ComboBox select a suggested item on blur without pressing Enter?
+* How to set the ComboBox value when the user leaves the input field?
+
+## Solution
+To automatically select the first matching item in the ComboBox when the input loses focus (on blur), follow these steps:
+
+1. Handle the [`OnBlur` event](slug:components/combobox/events#onblur) of the ComboBox to detect when the input loses focus.
+2. Retrieve the currently highlighted or filtered item using a JavaScript helper function via `JS interop`.
+3. Check for a matching item in the ComboBox data based on the user's input.
+4. Set the matching item as the selected value programmatically.
+
+>caption Auto-select the first matching item on blur
+
+````RAZOR
+@inject IJSRuntime js
+
+Selected value: @ComboBoxValue
+First Filtered value: @FirstFilteredItem
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+@code {
+ private IEnumerable ComboBoxData = Enumerable.Range(1, 123).Select(x => new ListItem { Text = "Item " + x, Value = x });
+ private int ComboBoxValue { get; set; }
+ private string FirstFilteredItem { get; set; } = string.Empty;
+ private bool IsComboBoxOpen { get; set; }
+
+ private async Task GetFirstFilteredItem()
+ {
+ FirstFilteredItem = await js.InvokeAsync("getHighligtedComboItem");
+ }
+
+ private void SelectItemOnTab()
+ {
+ if (!string.IsNullOrEmpty(FirstFilteredItem))
+ {
+ var matchingItem = ComboBoxData.FirstOrDefault(x => x.Text.ToLowerInvariant().Contains(FirstFilteredItem.Trim().ToLowerInvariant()));
+ if (matchingItem != null)
+ {
+ ComboBoxValue = matchingItem.Value;
+ FirstFilteredItem = string.Empty;
+ }
+ }
+ }
+
+ public class ListItem
+ {
+ public int Value { get; set; }
+ public string Text { get; set; } = string.Empty;
+ }
+}
+````
+## See Also
+
+- [ComboBox Events in Telerik UI for Blazor](slug:components/combobox/events)
\ No newline at end of file
From 4b5a149beb2a70190719058efe449d2b697f933a Mon Sep 17 00:00:00 2001
From: Tsvetomir Hristov <106250052+Tsvetomir-Hr@users.noreply.github.com>
Date: Tue, 17 Jun 2025 11:51:49 +0300
Subject: [PATCH 2/2] chore: modify solution section
---
.../combobox-auto-select-on-blur.md | 172 +++++++++++++-----
1 file changed, 124 insertions(+), 48 deletions(-)
diff --git a/knowledge-base/combobox-auto-select-on-blur.md b/knowledge-base/combobox-auto-select-on-blur.md
index 4780bd76c5..d8742793b2 100644
--- a/knowledge-base/combobox-auto-select-on-blur.md
+++ b/knowledge-base/combobox-auto-select-on-blur.md
@@ -23,87 +23,163 @@ res_type: kb
The article asnwers to the following question:
-* How can I configure the ComboBox to automatically select the first matching item when the input loses focus (e.g., when the user tabs away or clicks outside)?
-* How do I auto-select a ComboBox item based on user input when focus is lost?
+* How to configure the ComboBox to automatically select the first matching item when the input loses focus (e.g., when the user tabs away or clicks outside)?
+* How to auto-select a ComboBox item based on user input when focus is lost?
* Can the ComboBox select a suggested item on blur without pressing Enter?
* How to set the ComboBox value when the user leaves the input field?
## Solution
-To automatically select the first matching item in the ComboBox when the input loses focus (on blur), follow these steps:
+To automatically select the first matching item in the ComboBox when the input loses focus, use a combination of the ComboBox [`OnRead` event](slug:components/combobox/events#onread) and JavaScript interop. The provided example demonstrates how to:
-1. Handle the [`OnBlur` event](slug:components/combobox/events#onblur) of the ComboBox to detect when the input loses focus.
-2. Retrieve the currently highlighted or filtered item using a JavaScript helper function via `JS interop`.
-3. Check for a matching item in the ComboBox data based on the user's input.
-4. Set the matching item as the selected value programmatically.
+1. Use the `OnRead` event to filter data and store the first matching item.
+2. Attach a JavaScript event handler to detect when the user blurs the ComboBox input.
+3. Invoke a .NET method from JavaScript to set the ComboBox value to the first matching item when focus is lost.
+4. Update the ComboBox selection programmatically and refresh the UI.
>caption Auto-select the first matching item on blur
````RAZOR
+@using Telerik.DataSource.Extensions
+
+@implements IDisposable
+
@inject IJSRuntime js
+ComboBoxFirstItem: @ComboBoxFirstItem?.Text
+
Selected value: @ComboBoxValue
-First Filtered value: @FirstFilteredItem
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+@* Move JavaScript to a separate JS file *@
@code {
- private IEnumerable ComboBoxData = Enumerable.Range(1, 123).Select(x => new ListItem { Text = "Item " + x, Value = x });
+ private DotNetObjectReference<__Main>? DotNetRef { get; set; }
+
+ private List ComboBoxData { get; set; } = new();
private int ComboBoxValue { get; set; }
- private string FirstFilteredItem { get; set; } = string.Empty;
- private bool IsComboBoxOpen { get; set; }
+ private ListItem? ComboBoxFirstItem { get; set; }
+
+ [JSInvokable("OnComboBoxTab")]
+ public void OnComboBoxTab(string newStringValue)
+ {
+ if (ComboBoxFirstItem is not null && ComboBoxFirstItem.Text.Contains(newStringValue))
+ {
+ ComboBoxValue = ComboBoxFirstItem.Id;
+ ComboBoxFirstItem = default;
+
+ StateHasChanged();
+ }
+ }
- private async Task GetFirstFilteredItem()
+ private void ComboBoxValueChanged(int newValue)
{
- FirstFilteredItem = await js.InvokeAsync("getHighligtedComboItem");
+ ComboBoxValue = newValue;
+ ComboBoxFirstItem = default;
}
- private void SelectItemOnTab()
+ private async Task OnComboBoxRead(ReadEventArgs args)
{
- if (!string.IsNullOrEmpty(FirstFilteredItem))
+ var result = await ComboBoxData.ToDataSourceResultAsync(args.Request);
+
+ args.Data = result.Data;
+ args.Total = result.Total;
+
+ if (args.Request.Filters.Count > 0)
{
- var matchingItem = ComboBoxData.FirstOrDefault(x => x.Text.ToLowerInvariant().Contains(FirstFilteredItem.Trim().ToLowerInvariant()));
- if (matchingItem != null)
- {
- ComboBoxValue = matchingItem.Value;
- FirstFilteredItem = string.Empty;
- }
+ ComboBoxFirstItem = args.Data.Cast().First();
+ }
+ else
+ {
+ ComboBoxFirstItem = default;
+ }
+ }
+
+ protected override async Task OnAfterRenderAsync(bool firstRender)
+ {
+ if (firstRender)
+ {
+ await Task.Delay(1); // ensure HTML is ready
+ await js.InvokeVoidAsync("saveDotNetRef", DotNetRef);
+ await js.InvokeVoidAsync("attachComboKeyDown", "#combo-1");
}
+
+ await base.OnAfterRenderAsync(firstRender);
+ }
+
+ protected override void OnInitialized()
+ {
+ DotNetRef = DotNetObjectReference.Create(this);
+
+ for (int i = 1; i <= 24; i++)
+ {
+ ComboBoxData.Add(new ListItem()
+ {
+ Id = i,
+ Text = $"Item {i}"
+ });
+ }
+ }
+
+ public void Dispose()
+ {
+ DotNetRef?.Dispose();
+ _ = js.InvokeVoidAsync("detachComboKeyDown", "#combo-1");
}
public class ListItem
{
- public int Value { get; set; }
+ public int Id { get; set; }
public string Text { get; set; } = string.Empty;
}
}
````
## See Also
-- [ComboBox Events in Telerik UI for Blazor](slug:components/combobox/events)
\ No newline at end of file
+- [ComboBox Events](slug:components/combobox/events)
\ No newline at end of file