ListBox arrow up / down does not change selected item properly when AllowVirtualization is true #491

New Issue

claunia · 2026-01-29T17:38:12Z

claunia commented

2026-01-29 17:38:12 +00:00

Originally created by @geometrikal on GitHub (Aug 1, 2022).

Describe the bug

The arrow keys can be use to move selection in the ListBox up or down one place. However if AllowVirtualization is set to true, this behaviour is incorrect, with large jumps or disappearing selection.

To Reproduce

Create a project with a component as follows:

<RadzenListBox Data="Items"
               TValue="ItemViewModel"
               Style="height: 300px;"
               AllowVirtualization="true"
               @bind-Value="SelectedItem">
    <Template>
        @((context as ItemViewModel).Value)
    </Template>
</RadzenListBox>

@code {
    public class ItemViewModel
    {
        public int Value { get; set; }
    }
    public List<ItemViewModel> Items = Enumerable.Range(0, 100).Select(x => new ItemViewModel {Value = x}).ToList();
    public ItemViewModel SelectedItem;
}

Run the project.

In the list, scroll down and select an item (e.g. 13). Press the up arrow a few times. The selected item will start to jump ahead.

In the list, scroll down and select an item (e.g. 67). Press the down arrow. The selected item will dissappear.

Expected behavior

Arrow keys should move the selection forward or back one item

Desktop:

OS: Windows 11
Browser: Edge (chromium)
Version: Radzen.Blazor 3.19.5

Originally created by @geometrikal on GitHub (Aug 1, 2022). **Describe the bug** The arrow keys can be use to move selection in the ListBox up or down one place. However if `AllowVirtualization` is set to true, this behaviour is incorrect, with large jumps or disappearing selection. **To Reproduce** Create a project with a component as follows: ``` <RadzenListBox Data="Items" TValue="ItemViewModel" Style="height: 300px;" AllowVirtualization="true" @bind-Value="SelectedItem"> <Template> @((context as ItemViewModel).Value) </Template> </RadzenListBox> @code { public class ItemViewModel { public int Value { get; set; } } public List<ItemViewModel> Items = Enumerable.Range(0, 100).Select(x => new ItemViewModel {Value = x}).ToList(); public ItemViewModel SelectedItem; } ``` Run the project. In the list, scroll down and select an item (e.g. 13). Press the up arrow a few times. The selected item will start to jump ahead. In the list, scroll down and select an item (e.g. 67). Press the down arrow. The selected item will dissappear. **Expected behavior** Arrow keys should move the selection forward or back one item **Desktop:** - OS: Windows 11 - Browser: Edge (chromium) - Version: Radzen.Blazor 3.19.5

claunia closed this issue

2026-01-29 17:38:13 +00:00

claunia referenced this issue

2026-01-29 18:17:43 +00:00

[PR #491] [MERGED] Set Placeholder for HTML-editor components #2202

Sign in to join this conversation.

Branches Tags

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: starred/radzen-blazor#491