Completed
Last Updated: 07 Nov 2023 14:32 by ADMIN
Release 5.0.0 (15 Nov 2023) (R1 PI1)
Chris
Created on: 13 Mar 2023 09:22
Category: AutoComplete
Type: Bug Report
1
JavaScript error on browser autofill

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

 

0 comments