Incorrect expand arrow display in RadzenPanelMenuItem when child items are absent #1756

New Issue

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

claunia commented

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

Originally created by @quintushr on GitHub (May 9, 2025).

Describe the bug

The current implementation of the expand functionality is solely dependent on the presence or absence of <ChildContent>. This change disregards child items, leading to unintended behavior.

For instance, when generating a menu programmatically, as demonstrated in the demo here, if one of the tabs lacks child items, the expand arrow is incorrectly displayed.

The difference in functionality can be observed in the following commit diff:
RadzenPanelMenuItem.razor Diff

To Reproduce

@using System.ComponentModel;

<RadzenStack AlignItems="AlignItems.Center" class="rz-p-12">
    <RadzenPanelMenu Style="width:300px">
        <ChildContent>
            @foreach (var item in data)
            {
                <RadzenPanelMenuItem Text="@item.Text" @bind-Expanded="@item.Expanded">
                    <ChildContent>
                        @foreach (var subItem in item.Items)
                        {
                            <RadzenPanelMenuItem Text="@subItem.Text"  />
                        }
                    </ChildContent>
                    </RadzenPanelMenuItem>
                }
        </ChildContent>
    </RadzenPanelMenu>
</RadzenStack>
    
@code {

    static List<MenuModel> data = Enumerable.Range(0, 5).Select(i => new MenuModel(() => data)
    {
        Text = $"Menu{i}",
        Expanded = i == 0,
        Items = new List<MenuModel>()
    }).ToList();

    public class MenuModel : INotifyPropertyChanged
    {
        Func<List<MenuModel>> collection;
        public MenuModel(Func<List<MenuModel>> collection)
        {
            this.collection = collection;
        }

        public string Text { get; set; }

        bool _expanded;
        public bool Expanded 
        {
            get
            {
                return _expanded;    
            }
            set
            {
                if (_expanded != value)
                {
                    collection()?.Where(i => i != this).ToList().ForEach(s => s.Expanded = false);

                    _expanded = value;
                    OnPropertyChanged(nameof(Expanded));
                }
            }
        }

        public IEnumerable<MenuModel> Items { get; set; }

        public event PropertyChangedEventHandler PropertyChanged;

        protected virtual void OnPropertyChanged(string propertyName)
        {
            if (PropertyChanged != null) 
            {
                PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
            }
        }
    }
}

Paste in demo

Expected behavior

The expand arrow should only appear if there are child items to expand, regardless of the presence of <ChildContent>.

Screenshots

Desktop (please complete the following information):

OS: Windows
Browser Chrome
Version7.0.2

Additional context

Originally created by @quintushr on GitHub (May 9, 2025). **Describe the bug** The current implementation of the expand functionality is solely dependent on the presence or absence of `<ChildContent>`. This change disregards child items, leading to unintended behavior. For instance, when generating a menu programmatically, as demonstrated in the demo [here](https://blazor.radzen.com/panelmenu?theme=material3#panelmenu-programmatic), if one of the tabs lacks child items, the expand arrow is incorrectly displayed. The difference in functionality can be observed in the following commit diff: [RadzenPanelMenuItem.razor Diff](https://github.com/radzenhq/radzen-blazor/compare/b2541527461c9d361a22c7d55d8e0e8903076a94..c7db9394c852a59cd043d54c44621dee624309b8#diff-5d6a8a3a8b7c4e3d8c70c7c2ab056b4b) **To Reproduce** ```csharp @using System.ComponentModel; <RadzenStack AlignItems="AlignItems.Center" class="rz-p-12"> <RadzenPanelMenu Style="width:300px"> <ChildContent> @foreach (var item in data) { <RadzenPanelMenuItem Text="@item.Text" @bind-Expanded="@item.Expanded"> <ChildContent> @foreach (var subItem in item.Items) { <RadzenPanelMenuItem Text="@subItem.Text" /> } </ChildContent> </RadzenPanelMenuItem> } </ChildContent> </RadzenPanelMenu> </RadzenStack> @code { static List<MenuModel> data = Enumerable.Range(0, 5).Select(i => new MenuModel(() => data) { Text = $"Menu{i}", Expanded = i == 0, Items = new List<MenuModel>() }).ToList(); public class MenuModel : INotifyPropertyChanged { Func<List<MenuModel>> collection; public MenuModel(Func<List<MenuModel>> collection) { this.collection = collection; } public string Text { get; set; } bool _expanded; public bool Expanded { get { return _expanded; } set { if (_expanded != value) { collection()?.Where(i => i != this).ToList().ForEach(s => s.Expanded = false); _expanded = value; OnPropertyChanged(nameof(Expanded)); } } } public IEnumerable<MenuModel> Items { get; set; } public event PropertyChangedEventHandler PropertyChanged; protected virtual void OnPropertyChanged(string propertyName) { if (PropertyChanged != null) { PropertyChanged(this, new PropertyChangedEventArgs(propertyName)); } } } } ``` Paste in [demo](https://blazor.radzen.com/panelmenu?theme=material3#panelmenu-programmatic) **Expected behavior** The expand arrow should only appear if there are child items to expand, regardless of the presence of `<ChildContent>`. **Screenshots** ![Image](https://github.com/user-attachments/assets/7bc9926b-e5cd-4efd-bb67-a3acd073bc29) **Desktop (please complete the following information):** - OS: Windows - Browser Chrome - Version7.0.2 **Additional context**

claunia closed this issue

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

claunia commented

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

@akorchev commented on GitHub (May 9, 2025):

This was done as a performance optimization - if we bring back the older behavior there would be additional renders which are unintended. As a workaround I can suggest setting the ChildContent conditionally as we are doing here: https://github.com/radzenhq/radzen-blazor/blob/master/RadzenBlazorDemos/Shared/PanelMenu.razor#L10

We will also investigate if we can use CSS to hide the arrow in such cases.

@akorchev commented on GitHub (May 9, 2025): This was done as a performance optimization - if we bring back the older behavior there would be additional renders which are unintended. As a workaround I can suggest setting the ChildContent conditionally as we are doing here: https://github.com/radzenhq/radzen-blazor/blob/master/RadzenBlazorDemos/Shared/PanelMenu.razor#L10 We will also investigate if we can use CSS to hide the arrow in such cases.

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