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.