RadzenDropDown issues - can't click inside template elements

For example, can't select radio buttons - the list just folds and unfolds. It looks like RadzenDropDown intercepts click events. I want to click radio buttons inside chips and inside dropping list. Here is your simplified example from one of the RadzenDropDown demos, but with a template - only radio buttons are important here:

<RadzenDropDown
    @bind-Value=@selectedValues 
    Data=@source 
    Multiple=true 
    AllowClear=true 
    Chips=true
    Placeholder="Select products">
    <Template>
        <input type="radio" name="radioInput"/>
        <input type="radio" name="radioInput"/>
    </Template>
</RadzenDropDown>

@code {
    IEnumerable<int> selectedValues;
    IEnumerable<int> source = new int[] { 1, 2, 3, 4, 5 };
}

Another example with RadzenRadioButtonList instead of my own radio buttons.

<RadzenDropDown
    @bind-Value=@selectedValues 
    Data=@source 
    Multiple=true 
    AllowClear=true 
    Chips=true
    Placeholder="Select">
    <Template>
        @{
            var my = context as My;
        }
        <span>@my.Name</span>
        <RadzenRadioButtonList @bind-Value=@my.Sorting TValue="SortOrder?">
            <Items>
                <RadzenRadioButtonListItem
                    Text="↑" 
                    Value="SortOrder.Ascending" 
                    TValue="SortOrder?" />
                <RadzenRadioButtonListItem 
                    Text="↓"
                    Value="SortOrder.Descending" 
                    TValue="SortOrder?" />
            </Items>
        </RadzenRadioButtonList>
    </Template>
</RadzenDropDown>

@code {
    IEnumerable<My> selectedValues;
    IEnumerable<My> source = new My[] { 
        new My() { Name = "First" }, new My()  { Name = "Second" } };
    
    public enum SortOrder { Ascending, Descending, };
    
    public class My
    {
        public string Name { get; set; }
        public SortOrder? Sorting { get; set; }
    }
}

Almost all things are ok, but several claims:

  1. Every click on radio button inside a chip toggles drop down list - it must be toggled by clicking outside of the radio button only;

  2. Clicking radio button inside drop down list checks and unchecks element.

Third example - with nested drop downs. They work fine - no unneeded foldings and unfoldings of the outer drop down list when I click on inner drop downs inside chips. There are also no unneeded checks and unckecks of elements when I choose a value of an inner drop down inside dropping list of the outer drop down.

Disadvantage - the inner drop downs are too large. And I want to use arrows instead of strings to designate sortings - to avoid localization.

<RadzenDropDown
    @bind-Value=@selectedValues 
    Data=@source 
    Multiple=true 
    AllowClear=true 
    Chips=true
    Placeholder="Select">
    <Template>
        @{
            var my = context as My;
        }
        <span>@my.Name</span>
        <RadzenDropDown
            @bind-Value=@my.Sorting 
            Data=@(Enum.GetValues<SortOrder>().Cast<Enum>())        
            Placeholder="Select"/>
    </Template>
</RadzenDropDown>

@code {
    IEnumerable<My> selectedValues;
    IEnumerable<My> source = new My[] { 
        new My() { Name = "First" }, new My()  { Name = "Second" } };
    
    public enum SortOrder { Ascending, Descending, };
    
    public class My
    {
        public string Name { get; set; }
        public SortOrder? Sorting { get; set; }
    }
}

Thank you! With your link now it works just like I want - I mean the variant with Radzen radio buttons.

<RadzenDropDown
    @bind-Value=@selectedValues 
    Data=@source 
    Multiple=true 
    AllowClear=true 
    AllowSelectAll=false
    Chips=true
    Placeholder="Select"
    MaxSelectedLabels="@source.Count() + 1">
    <Template>
        @{
            var my = context as My;
        }
        <span>@my.Name</span>
        <RadzenRadioButtonList 
            @bind-Value=@my.Sorting 
            TValue="SortOrder?"
            @onclick:stopPropagation="true"
            Style="display:inline-flex">
            <Items>
                <RadzenRadioButtonListItem
                    Text="↑" 
                    Value="SortOrder.Ascending" 
                    TValue="SortOrder?" />
                <RadzenRadioButtonListItem 
                    Text="↓"
                    Value="SortOrder.Descending" 
                    TValue="SortOrder?" />
            </Items>
        </RadzenRadioButtonList>
    </Template>
</RadzenDropDown>

@code {
    IEnumerable<My> selectedValues;
    IEnumerable<My> source = new My[] { 
        new My() { Name = "First" }, new My()  { Name = "Second" } };
    
    public enum SortOrder { Ascending, Descending, };
    
    public class My
    {
        public string Name { get; set; }
        public SortOrder? Sorting { get; set; }
    }
}

I renounced the variant with pure HTML radios - it requires some changes in value attribute or use more complex styles (like Bootstrap), because for every radio-group this value should be unique, so I have no idea now how to fix it quickly.

Another question - is it possible to add some template to the RadzenRadioButtonListItem instead of a Text property? Or add some Content property for this purpose? For example I want to place some SVG graphics for every radio button instead of the text, or in addition to the text.

At the moment only Text is supported:

Another question. Why there are overloadings for methods Equals, ToString, and GetHashCode for binding DropDown to custom object (first example at this link)? I made it without these overloadings as in my examples here in this topic, and everything works fine. One small thing - I use a template for DropDown. With a template can I not overload these methods?

So, if I understood correctly, the first example in "DropDown data binding to custom objects" is obsolete and now it doesn't require to override these methods?

No, there are no obsolete examples.

Sorry, I was wrong. As I understood, now you MUST NOT override them (at least Equals and GetHashCode) to bind drop down with multiple selection to custom objects. But you CAN if you want to change the logic of equality, string representation and so on.

Hi There, I had a similar issue to this user when trying to click on Radzen inputs in a RadzenDataList (trying to achieve carousel effect where I go through different attributes and select values for them). I added the stoppropogation code as outlined in this link, but it did not seem to work. Is there something else that it could be, perhaps an issue specifically with RadzenDataList?