RadzenDropDown in RadzenTemplateForm

Radzen.Blazor Components
1

Hello,
there seems to be an issue with the RadzenDropDown-Component nested in a RadzenTemplateForm when chips are enabled. After selecting an item and selecting a TextBox-Component, when i submit the form with the Enter-Key the DropDown-Selection gets removed.

Code:

<RadzenTemplateForm TItem="List<string>" Data="@emptyList">
    <RadzenTextBox />
    <RadzenDropDown Data="@numbers" Multiple="true" TValue="List<int>" Chips MaxSelectedLabels="256" />
</RadzenTemplateForm>

@code {
    List<string> emptyList = new List<string>();
    List<int> numbers = new List<int> { 1, 2, 3, 4, 5, 6, 7, 8 };
}

To Replicate:
Select items in the DropDown,
select/focus the TextBox,
press enter

if I add the "type=button" attribute the item stays selected, so i'm guessing the remove-buttons of the chips are of the submit type.

2

Hi @DDBennyA,

You must use @bind-Value in order to use RadzenTemplateForm. The code you have pasted isn't supported.

3

Sorry i tried to give an easy example and removed everything i thought was unneccessary. Same issue.

The actual Code:

<RadzenDropDown Data="@_AllRoles" Multiple="true" @bind-Value=SelectedRoles TextProperty="Name"
                TValue="List<CustomRole>" Style="width: 100%;" AllowFiltering="true"
                FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive"
                Chips MaxSelectedLabels="256" AllowClear Change="SelectionChanged"/>


@code {
    [Parameter]
    public List<CustomRole> SelectedRoles { get; set; }
    [Parameter]
    public EventCallback<List<CustomRole>> SelectedRolesChanged { get; set; }   

    private List<CustomRole> _AllRoles = new List<CustomRole>();

    protected async override Task OnInitializedAsync()
    {
        try
        {
            _AllRoles = (await IdentityClient.GetRolesAsync()).Roles.Select(role => role.ToCustomRole()).OrderBy(role => role.Name).ToList();

            await base.OnInitializedAsync();
        }
        catch (Exception ex)
        {
            Error.ShowMessage(ex);
            Error.Log(ex);
        }
    }

    private async Task SelectionChanged()
    {
        await SelectedRolesChanged.InvokeAsync(SelectedRoles);
    }
}

This is a Blazorcomponent that is nested in a RadzenTemplateForm

4

This code doesn't have RadzenTemplateForm. Basically you should use it like this:

<RadzenTemplateForm Data="myModel" ...>
     <RadzenDropDown @bind-Value="myModel.SomeProperty" />
</RadzenTemplateForm>
5

Ok i have built another Example which hopefully demonstrates the problem. I Hope i included everything neccessary.

<RadzenTemplateForm Data="MyModel" TItem="TheModel" Submit="OnSubmit">
    <RadzenTextBox @bind-Value=MyModel.Text />
    <RadzenDropDown @bind-Value="MyModel.ModelNumbers" Multiple="true" Chips MaxSelectedLabels="10" Data="numbers" />
    <RadzenButton ButtonType="ButtonType.Submit" Text="Submit"/>
</RadzenTemplateForm>


@code {
    public class TheModel
    {
        public List<int> ModelNumbers { get; set; }
        public string Text;
    }
    List<int> numbers = new List<int> {1,2,3,4,5,6,7,8};
    TheModel MyModel = new TheModel();

    private void OnSubmit()
    {
        Console.WriteLine("Submitted");
    }
}

Submit only triggers after the DropDown-List is emptied when submitting via Enter-Key

6

Fixed immediately and the fix will be part of our upcoming update later today: