Dropdown in RadzenDataFilter : Shift key trigger a bad request #1772

New Issue

claunia · 2026-01-29T17:58:23Z

claunia commented

2026-01-29 17:58:23 +00:00

Originally created by @tale80 on GitHub (May 20, 2025).

Describe the bug
I have a RadzenDataFilter with mutliple RadzenDataFilterProperty.
On some of them, the FilterTemplate is a RadzenDropDown binded on an enum to display only values of the enum.

If the user select the value with the mouse, no problem, the filter is correctly converted.
But after selecting in the dropdown, if the user press "Shift", the dropdown change its value and the filter is casted with the string value of the enum, not the int value.

For example, in my case, I have a state enum filter (Inactive = -1, Draft = 0, Active = 1)
The user select the Draft value, the Filters property will look like this :

after pressing shift, the request is triggered another time but the filter look like this :

To Reproduce

Create a RadzenDataFilter with a RadzenDataFilterProperty using a drop down binded on an enum as a template.
Select a value on the dropdown with the mouse
Keep focus on the drop down, Press shift

Expected behavior
Nothing happen. Shift is not a navigation key for drop down or data filter.

with a legacy navigation key (arrow up/down), the request is ok

Desktop (please complete the following information):

OS: Fedora 42
Browser: Chrome 136.0.7103.113
Radzen version : 7.0.6

Originally created by @tale80 on GitHub (May 20, 2025). **Describe the bug** I have a RadzenDataFilter with mutliple RadzenDataFilterProperty. On some of them, the FilterTemplate is a RadzenDropDown binded on an enum to display only values of the enum. If the user select the value with the mouse, no problem, the filter is correctly converted. But after selecting in the dropdown, if the user press "Shift", the dropdown change its value and the filter is casted with the string value of the enum, not the int value. For example, in my case, I have a state enum filter (Inactive = -1, Draft = 0, Active = 1) The user select the Draft value, the Filters property will look like this : ![Image](https://github.com/user-attachments/assets/c79ca878-8bb1-4519-82aa-272f5df7a0e2) after pressing shift, the request is triggered another time but the filter look like this : ![Image](https://github.com/user-attachments/assets/059a807a-c896-498d-889f-c400c09d8f14) **To Reproduce** 1. Create a RadzenDataFilter with a RadzenDataFilterProperty using a drop down binded on an enum as a template. 2. Select a value on the dropdown with the mouse 3. Keep focus on the drop down, Press shift **Expected behavior** Nothing happen. Shift is not a navigation key for drop down or data filter. with a legacy navigation key (arrow up/down), the request is ok **Desktop (please complete the following information):** - OS: Fedora 42 - Browser: Chrome 136.0.7103.113 - Radzen version : 7.0.6

claunia closed this issue

2026-01-29 17:58:23 +00:00

claunia commented

2026-01-29 17:58:24 +00:00

@enchev commented on GitHub (Jun 4, 2025):

We will need runnable code demonstrating the problem. Please use our demos (they are editable) to try to replicate your case.

@enchev commented on GitHub (Jun 4, 2025): We will need runnable code demonstrating the problem. Please use our demos (they are editable) to try to replicate your case.

claunia commented

2026-01-29 17:58:24 +00:00

@tale80 commented on GitHub (Jun 4, 2025):

Hi @enchev,

I'm working on it.

I used this demo to start : https://blazor.radzen.com/datafilter?theme=material3#keyboard-navigation

For now, I can't reproduce the problem directly on the demo, I will take a look in our code to see what can be the difference between my app and the demo.

But, I can reproduce the error of event triggered by the shift key. The request triggered is correct (at least), but the shift key should not trigger the event

The demo code for now :

@using RadzenBlazorDemos.Data
@using RadzenBlazorDemos.Models.Northwind
@using Microsoft.EntityFrameworkCore
@using System.ComponentModel.DataAnnotations;

@inherits DbContextPage

<RadzenStack Gap="2rem">

    <RadzenDataFilter @ref="dataFilter" Auto=auto Data="@orders" TItem="OrderDemo" FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive">
        <Properties>
            <RadzenDataFilterProperty
            TItem="OrderDemo"
            Property="EnumValue"
            Title="EnumValue"
            FilterOperator="@FilterOperator.Equals"
            Type="@typeof(EnumDemo)">
    <FilterTemplate>
        <RadzenDropDown Style="width:100%;"
                        AllowFiltering="false"
                        FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive"
                        AllowVirtualization="true"
                        Change="@(args => OnChange(args))"
                        @bind-Value="@context.FilterValue"
                        Data="@(Enum.GetValues(typeof(EnumDemo)).Cast<int>())"
                        AllowClear="true"
                        Multiple="false">
            <Template Context="enumType">
                @{ var enumTypeCasted = (EnumDemo)enumType; }
                <RadzenText>
                    @enumTypeCasted.GetDisplayDescription()
                </RadzenText>
            </Template>
            <ValueTemplate Context="enumType">
                @{ var enumTypeCasted = (EnumDemo)enumType; }
                <RadzenText>
                    @enumTypeCasted.GetDisplayDescription()
                </RadzenText>
            </ValueTemplate>
        </RadzenDropDown>
    </FilterTemplate>
</RadzenDataFilterProperty>
        </Properties>
    </RadzenDataFilter>

</RadzenStack>

@code {
    bool auto = true;
    RadzenDataFilter<OrderDemo> dataFilter;

    IQueryable<OrderDemo> filteredOrders;
    IQueryable<OrderDemo> orders;
    RadzenDataGrid<OrderDemo> ordersGrid;

    IEnumerable<int> finalSelectedIds;
    IEnumerable<int> selectedIds;
    IEnumerable<int> orderIds;

    IEnumerable<int> finalSelectedProductIds;
    IEnumerable<int> selectedProductIds;
    IEnumerable<int> productIds;



    async Task ApplyFilter()
    {
        finalSelectedIds = selectedIds;
        finalSelectedProductIds = selectedProductIds;
        await dataFilter.Filter();
    }

    private void OnChange(object value)
    {
        ApplyOrderDateFilter();
    }

    async Task ApplyOrderDateFilter()
    { 
        Console.WriteLine(dataFilter.ToFilterString());
        
        if (auto) 
        { 
            await dataFilter.Filter();
        }
    }

    protected override async Task OnInitializedAsync()
    {
        await base.OnInitializedAsync();
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        await base.OnAfterRenderAsync(firstRender);
    }

    public enum EnumDemo 
    {
        [Display(Description = "My Value 1")]
        Value1,

        [Display(Description = "My Value 2")]
        Value2
    }

    public class OrderDemo : Order
    {
        public EnumDemo EnumValue {get;set;}
    }
}

Add a filter, open the drop down filter, select one, then press shift. In console, you will see :

I will complete the demo as soon as I have looked into our code for the bad converted request.

@tale80 commented on GitHub (Jun 4, 2025): Hi @enchev, I'm working on it. I used this demo to start : https://blazor.radzen.com/datafilter?theme=material3#keyboard-navigation For now, I can't reproduce the problem directly on the demo, I will take a look in our code to see what can be the difference between my app and the demo. But, I can reproduce the error of event triggered by the shift key. The request triggered is correct (at least), but the shift key should not trigger the event The demo code for now : ```csharp @using RadzenBlazorDemos.Data @using RadzenBlazorDemos.Models.Northwind @using Microsoft.EntityFrameworkCore @using System.ComponentModel.DataAnnotations; @inherits DbContextPage <RadzenStack Gap="2rem"> <RadzenDataFilter @ref="dataFilter" Auto=auto Data="@orders" TItem="OrderDemo" FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive"> <Properties> <RadzenDataFilterProperty TItem="OrderDemo" Property="EnumValue" Title="EnumValue" FilterOperator="@FilterOperator.Equals" Type="@typeof(EnumDemo)"> <FilterTemplate> <RadzenDropDown Style="width:100%;" AllowFiltering="false" FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive" AllowVirtualization="true" Change="@(args => OnChange(args))" @bind-Value="@context.FilterValue" Data="@(Enum.GetValues(typeof(EnumDemo)).Cast<int>())" AllowClear="true" Multiple="false"> <Template Context="enumType"> @{ var enumTypeCasted = (EnumDemo)enumType; } <RadzenText> @enumTypeCasted.GetDisplayDescription() </RadzenText> </Template> <ValueTemplate Context="enumType"> @{ var enumTypeCasted = (EnumDemo)enumType; } <RadzenText> @enumTypeCasted.GetDisplayDescription() </RadzenText> </ValueTemplate> </RadzenDropDown> </FilterTemplate> </RadzenDataFilterProperty> </Properties> </RadzenDataFilter> </RadzenStack> @code { bool auto = true; RadzenDataFilter<OrderDemo> dataFilter; IQueryable<OrderDemo> filteredOrders; IQueryable<OrderDemo> orders; RadzenDataGrid<OrderDemo> ordersGrid; IEnumerable<int> finalSelectedIds; IEnumerable<int> selectedIds; IEnumerable<int> orderIds; IEnumerable<int> finalSelectedProductIds; IEnumerable<int> selectedProductIds; IEnumerable<int> productIds; async Task ApplyFilter() { finalSelectedIds = selectedIds; finalSelectedProductIds = selectedProductIds; await dataFilter.Filter(); } private void OnChange(object value) { ApplyOrderDateFilter(); } async Task ApplyOrderDateFilter() { Console.WriteLine(dataFilter.ToFilterString()); if (auto) { await dataFilter.Filter(); } } protected override async Task OnInitializedAsync() { await base.OnInitializedAsync(); } protected override async Task OnAfterRenderAsync(bool firstRender) { await base.OnAfterRenderAsync(firstRender); } public enum EnumDemo { [Display(Description = "My Value 1")] Value1, [Display(Description = "My Value 2")] Value2 } public class OrderDemo : Order { public EnumDemo EnumValue {get;set;} } } ``` Add a filter, open the drop down filter, select one, then press shift. In console, you will see : ![Image](https://github.com/user-attachments/assets/a9cf42fb-ae1f-4684-ae15-0496b6c3c19c) I will complete the demo as soon as I have looked into our code for the bad converted request.

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#1772