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

New Issue

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

claunia commented

2026-01-29 17:58:07 +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**

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