RadzenDropdown doesn't close upon selection (**solved**)

Radzen.Blazor Components
1

Hello

I'm stuggling since a couple of day with that problem.

I have 2 pages where I put Radzen Dropdown component, that doesn't close when I select a value.

I try to copy/paste an exemple from Radzen component page into a new page in my application, same problem.
I creat a new Radzen Blazor application from scrtch and compy paste exact same dropdoan into a new page and it works.

In the faultyu application, I isolated the layout, remove own CSS, tried everything that come to my mind, but nothing works.

Even chatgpt/deepseek/copilot/perplexity are not able to help...

It is something linked to my project but I have no idea on what it could be.

Is someone could help please?

@page "/test-dropdown"

<RadzenDropDown TValue="int"
                Data=@companyNames
                TextProperty="Name" 
                ValueProperty="Id"
                Change="OnCompanyChanged"
                Style="width: 300px" />

<p>Selected: @value</p>

@code {
    private int? value;
    private List<Company> companyNames = new()
    {
        new Company { Id = 1, Name = "Alpha" },
        new Company { Id = 2, Name = "Beta" }
    };

     private void OnCompanyChanged(object value)
    {
        Console.WriteLine($"Selected: {value}");
        this.value = (int?)value;
    }

    public class Company
    {
        public int Id { get; set; }
        public string Name { get; set; }
    }
}

Of course I have no js error in browser console, or app console, Raden is just updated on its last version

2

If you have premium theme you probably need to update it. More info here: https://blazor.radzen.com/changelog?theme=material3#v7-animations

3

Also make sure this page has interactivity enabled. All Radzen components need interactivity in order to work.

4

no I haven't thanks for your reply

5

it is
Here the layout

@inherits LayoutComponentBase

<RadzenComponents />
<RadzenDialog />
<RadzenNotification />
<RadzenTooltip />
<RadzenContextMenu />

<RadzenLayout>
    <RadzenHeader class="rz-p-3 header rz-letter-spacing">
        <RadzenRow JustifyContent="JustifyContent.Start" AlignItems="AlignItems.Center" Gap="0">
            <RadzenColumn Size="9">
                <RadzenLink Path="/" Text="CLUB PRINTEMPS" class="logo">
                    <span class="title">CLUB PRINTEMPS</span>
                   
                    <span class="subtitle subtitle-yellow"> International</span>
                    <span class="subtitle subtitle-green"> France et Europe</span>
                </RadzenLink>
            </RadzenColumn>
            <RadzenColumn Size="3">
                <RadzenStack AlignItems="AlignItems.Center" Orientation="Orientation.Horizontal" JustifyContent="JustifyContent.End" Gap="20px" >
                    @* <AuthorizeView>
                        <Authorized>
                            <RadzenLabel Text="@context.User.Identity.Name" />
                        </Authorized>
                    </AuthorizeView> *@
                    <RadzenLabel Text="@($"{UserState.SelectedUser?.Lastname} {UserState.SelectedUser?.Firstname}")" />
                    <RadzenLink Click="" class="rz-link-border">
                        <i class="material-symbols-outlined rz-font-size-32 rz-color-header-icon">power_settings_new</i>
                    </RadzenLink>
                    <RadzenLink @onclick="Logout" class="rz-link-border">
                        <i class="material-symbols-outlined rz-font-size-32 rz-color-header-icon">home</i>
                    </RadzenLink>
                    <RadzenLink Path="/logout" class="rz-link-padding-right">
                        <i class="material-symbols-outlined rz-font-size-22 rz-circle-icon">question_mark</i>
                    </RadzenLink>
                </RadzenStack>
            </RadzenColumn>
        </RadzenRow>
    </RadzenHeader>
    <RadzenBody class="rz-p-3 rz-m-0 rz-letter-spacing">
        @Body
    </RadzenBody>
</RadzenLayout>

App.razor

@inject NavigationManager NavigationManager
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <base href="@NavigationManager.BaseUri" />
    <RadzenTheme @rendermode="@InteractiveServer" Theme="pts-printania" />
    <link href="css/pts-printania-base.css" rel="stylesheet" />
    <link rel="stylesheet" href="css/app.css" />
    <link rel="icon" href="favicon.ico" />
    <HeadOutlet @rendermode="@InteractiveServer" />
</head>

<body>
    <Routes @rendermode="@InteractiveServer" />
    <script src="_framework/blazor.web.js"></script>
    <script src="_content/Radzen.Blazor/Radzen.Blazor.js?v=@(typeof(Radzen.Colors).Assembly.GetName().Version)"></script>
</body>

</html>
6

This is probably a custom theme which needs to be updated in order to work with Radzen.Blazor 7.x

7

Radzen version I use is 7.0.5.0, previous was 7.0.3.0, do I need to upgrade theme and if yes, what is the process? I read the link upward bu it's just the changelog

8

There was no theme change between 7.0.3 and 7.0.5. However I think it didn't work with 7.0.3 either. You have a custom theme which is outdated. We don't have a procedure for updating custom themes - you probably need to build it from the source as you originally did.

9

Hum, ok, thanks, problem is tht it's not me that buid that them, I know my coleague used SCSS files do I have to replace some files in the solutions? And if yes, what files and wher I get it. Sorry but I'm backend developper doing front end, and I don't knwo how to mange this.

10

In that case I suggest using Radzen.Blazor 6.x.x. or using some of the built-in themes.

11

Thnak you very much, it was that I change custom theme by default material and it works.

12

I have the same issue. I made sure that interactivity was setup correctly and still had the issue. I was on version 8.5.1 (latest as of this posting) so I fell back to version 8.5.0, still had the issue. I then fell back to version 8.4.3 and the issue went away.

Was something changed that I need to address in my app to avoid issues with future releases? I’m fairly certain that most of my users are using the mouse to navigate these components but for accessibility concerns (health care enterprise :slight_smile:) we do need to take into consideration keyboard navigation.

13

Can you point us to some of our demos where this can be reproduced? Or if you have a code example demobstrating the problem you can post it here.