The AutoComplete DebounceDelay value is larger and the user is quick to type and blur the component, the dropdown will still open when this is no longer necessary.
A possible workaround is to cancel the Open event if it fires too soon after OnChange (uncomment the yellow line):
<p>Quickly type a number (1 - 24) and blur the component:</p>
<TelerikAutoComplete Data="@ListItems"
@bind-Value="@SelectedValue"
ValueField="@nameof(ListItem.Text)"
DebounceDelay="@AutoCompleteDebounceDelay"
OnChange="@OnAutoCompleteChange"
OnOpen="@OnAutoCompleteOpen"
Width="300px" />
@code {
private List<ListItem> ListItems { get; set; } = new();
private string SelectedValue { get; set; } = string.Empty;
private const int AutoCompleteDebounceDelay = 1000;
private DateTime LastAutoCompleteOnChange { get; set; } = DateTime.Now;
private void OnAutoCompleteOpen(AutoCompleteOpenEventArgs args)
{
if (DateTime.Now - LastAutoCompleteOnChange < new TimeSpan(0, 0, 0, AutoCompleteDebounceDelay * 2))
{
//args.IsCancelled = true;
}
}
private void OnAutoCompleteChange(object currentValue)
{
LastAutoCompleteOnChange = DateTime.Now;
}
protected override void OnInitialized()
{
ListItems = new List<ListItem>();
for (int i = 1; i <= 24; i++)
{
ListItems.Add(new ListItem()
{
Id = i,
Text = $"{i}",
Category = $"Category {i % 6 + 1}"
});
}
base.OnInitialized();
}
public class ListItem
{
public int Id { get; set; }
public string Text { get; set; } = string.Empty;
public string Category { get; set; } = string.Empty;
}
}
The AutoComplete component does not update the category grouping header, even when the data within that group has been removed. As a result, the outdated group header remains visible until you scroll down to another group, at which point the first group header refreshes and disappears as expected.
Repro: REPL link.
There is a JavaScript error in telerik-blazor.js when using browser autofill with the AutoComplete and the ComboBox:
Cannot read properties of undefined (reading 'length')
A possible workaround is to use a TextBox or a DropDownList.
Here is a test page:
@using System.ComponentModel.DataAnnotations
<TelerikForm Model="@Employee" Width="300px">
<FormItems>
<FormItem>
<Template>
<label>
First Name
<TelerikTextBox AutoComplete="given-name" @bind-Value="@Employee.FirstName" />
</label>
</Template>
</FormItem>
<FormItem>
<Template>
<label>
Last Name
<TelerikTextBox AutoComplete="family-name" @bind-Value="@Employee.LastName" />
</label>
</Template>
</FormItem>
<FormItem>
<Template>
<label class="k-label k-form-label">State*</label>
<TelerikAutoComplete Data="@StateList"
ValueField="@nameof(DropDownListModel.DataText)"
@bind-Value="@Employee.StateName"
Placeholder="Enter a State, e.g., Alabama"
OnChange="OnStateSelected">
</TelerikAutoComplete>
@*<TelerikDropDownList Data="@StateList"
TextField="@nameof(DropDownListModel.DataText)"
ValueField="@nameof(DropDownListModel.DataText)"
@bind-Value="@Employee.StateName"
DefaultText="Enter a State, e.g., Alabama"
OnChange="OnStateSelected">
</TelerikDropDownList>*@
<TelerikValidationMessage For="@(() => Employee.StateName)"></TelerikValidationMessage>
</Template>
</FormItem>
</FormItems>
</TelerikForm>
@code {
Person Employee { get; set; } = new Person();
List<DropDownListModel> StateList { get; set; } = new List<DropDownListModel>() {
new DropDownListModel() { DataText = "Alabama" },
new DropDownListModel() { DataText = "Alaska" },
new DropDownListModel() { DataText = "Texas" },
new DropDownListModel() { DataText = "New York" },
new DropDownListModel() { DataText = "Washington" },
new DropDownListModel() { DataText = "California" },
new DropDownListModel() { DataText = "Florida" }
};
void OnStateSelected(object newValue)
{
}
public class Person
{
[Required]
public string FirstName { get; set; }
[Required]
public string LastName { get; set; }
[Required]
public string StateName { get; set; }
}
public class DropDownListModel
{
public string DataText { get; set; }
}
}
Since 2.23.0 there is something wrong with the z-index of the TelerikComboBox.
If a TelerikComboBox is used on a TelerikWindow, starting to type opens the dropdown behind the window and thus cannot be seen.
Clicking on the Dropdown Button of the ComboBox, the dropdown is opened and displayed correctly and after clicking on the Dropdown Button once, typing in the text field also displays the dropdown correctly.
It really bothers my users though that they cannot start typing right away so I had to revert to version 2.22.0 which does not have this error.
Note: Since I figured it's some kind of styling problem, I rebuild our custom theme using the ThemeBuilder but the error was still there after that.