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; }
}
}