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

Open
opened 2026-01-29 17:38:10 +00:00 by claunia · 0 comments
Owner

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
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: starred/radzen-blazor#488