Declined
Last Updated: 09 May 2022 10:04 by ADMIN
Brent
Created on: 03 May 2022 23:46
Category: UI for Blazor
Type: Bug Report
0
Dropdownlist selects first selection if keyboard is used prior to clicking on desired selection

I have a telerikdropdownlist in the EditorTemplate of a Grid. If a user uses the keyboard to speed the navigation of the dropdown (for example: they type a T to immediately scroll to the T section), then clicks on a selection further down in the list, the selected item becomes the item navigated to via the Keyboard, not the item that is actually clicked on. Clicking on an item (without using the keyboard navigation first) works as expected. I was able to replicate this behavior in REPL using the following code:


<br />
<br />
<TelerikDropDownList
    Data = "@People"
    @bind-Value="@SelectedUser"
    TextField="LastFirst"
    ValueField="Id"
    Width="400px"
/>
<br />
<br />
<TelerikGrid
    Data="@Assets"
    EditMode="GridEditMode.Inline"
    Width="800px"
    OnUpdate="@Update"
    >
   <GridColumns>
       <GridColumn Field="@nameof(Asset.AssetId)" Title="ID" Width="50px"/>
       <GridColumn Field="@nameof(Asset.BarCode)" Title="BarCode" Width="125px"/>
       <GridColumn Field="@nameof(Asset.UserId)" Title="User" Width="125px">
           <Template>
                @{
                    CurrentAsset = (Asset)context;
                    Person? p = People.FirstOrDefault<Person>(x => x.Id == CurrentAsset.UserId);
                    if(p != null)
                    {                        
                        <span>@p.LastFirst</span>
                    }
               }
           </Template>
           <EditorTemplate>
               @{
                    CurrentAsset = (Asset)context;
                   <TelerikDropDownList
                        Data = "@People"
                        @bind-Value="@CurrentAsset.UserId"
                        TextField="LastFirst"
                        ValueField="Id"
                   />

               }
           </EditorTemplate>
       </GridColumn>
        <GridCommandColumn Width="100px" Locked="true">
            <GridCommandButton Command="Save" Icon="save" ShowInEdit="true"></GridCommandButton>
            <GridCommandButton Command="Edit" Icon="edit"></GridCommandButton>
            <GridCommandButton Command="Delete" Icon="delete"></GridCommandButton>
            <GridCommandButton Command="Cancel" Icon="cancel" ShowInEdit="true"></GridCommandButton>
        </GridCommandColumn>        
   </GridColumns>
</TelerikGrid>

<br />

@code {
    public List<Person> People = new();
    public List<Asset> Assets = new();
    int SelectedUser = 0;
    Asset CurrentAsset = new();

    protected override void OnInitialized()
    {
        LoadData();
        base.OnInitialized();
    }

    public void LoadData()
    {
        People.Add(new Person(1, "Brent", "Tuominen"));
        People.Add(new Person(2, "Tina", "Tuominen"));
        People.Add(new Person(3, "Casey", "Tuominen"));
        People.Add(new Person(4, "Ryan", "Tuominen"));
        People.Add(new Person(5, "Alex", "Tuominen"));

        Assets.Add(new Asset(1, "BC001"));
        Assets.Add(new Asset(2, "BC002"));
        Assets.Add(new Asset(3, "BC003"));
        Assets.Add(new Asset(4, "BC004"));
        Assets.Add(new Asset(5, "BC005"));
    }

    public void Update(GridCommandEventArgs args)
    {
        Asset a = (Asset)args.Item;
        Asset? asst = Assets.FirstOrDefault(x => x.AssetId == a.AssetId);

        if(asst != null)
        {
            asst.BarCode = a.BarCode;
            asst.UserId = a.UserId; 
        }
        StateHasChanged();
    }

    public class Asset
    {
        public Asset()
        {
            
        }
        public Asset(int assetId, string barcode)
        {
            AssetId = assetId;
            BarCode = barcode;
        }
        public int AssetId{ get; set; }
        public string BarCode { get; set; } = string.Empty;
        public int? UserId{ get; set; }
    }

    public class Person
    {
        public Person(int id, string fName, string lName)
        {
            Id = id;
            FirstName = fName;
            LastName = lName;
        }
        public int Id{ get; set; }
        public string FirstName { get; set; } = string.Empty;
        public string LastName { get; set; } = string.Empty;
        public string LastFirst
        {
            get
            {
                return LastName + ", " + FirstName;
            }
        }
        public string FullName
        {
            get
            {
                return FirstName + " " + LastName;
            }
        }
    }
}

1 comment
ADMIN
Radko
Posted on: 09 May 2022 10:04

Hello Brent,

In your snippet, you use the same variable for both the Template and the EditorTemplate. The issue stems from the fact the Template overrides the variable, which then the EditorTemplate is using internally. I have updated the snippet so the field used within the EditorTemplate is not shared and the issue is no longer reproduced. Here is a REPL link where you can test this: https://blazorrepl.telerik.com/wcYfOZuV28Z1Ecls45

Regards, Radko Stanev Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.