RadzenAutoComplete select list not working on dialog

Radzen.Blazor Components
1

When I use the RadzenAutoComplete on a page, selecting items with the mouse from the associated select list works fine to populate the text in the RadzenAutoComplete.

When I use the RadzenAutoComplete on a dialog, selecting items with the mouse from the associated select list, does not work to populate the text in the RadzenAutoComplete.

Attached sample code demonstating the issue:
RadzenAutoComplete.zip (1016.4 KB)

2

Hi @lanceGeorgeson,

The problem seems to be caused by this:

<RadzenTemplateForm Data=SelectedUserName TItem=string Submit="SelectUser">

If you remove the form you would be able to select the item. Alternatively you can create a class for the model of the form:

@inject NavigationManager NavigationManager 
@inject NotificationService NotificationService
@inject DialogService DialogService

<RadzenContent Container="main" class="pt-0">
    <ChildContent>
        <RadzenTemplateForm Data=model TItem="FormModel" Submit="SelectUser">
            <ChildContent>
                <RadzenRow>
                    <RadzenColumn Size="3">
                        <RadzenLabel Text="Select User" class="w-100" />
                    </RadzenColumn>
                    <RadzenColumn Size="9">
                        <RadzenAutoComplete @bind-Value=@model.SelectedUserName Data=@Users TextProperty="UserName" LoadData=@OnLoadData class="sdtx-edit-field" Disabled=@IsLoading>
                            <Template Context="user">
                                <RadzenStack Gap="0">
                                    <RadzenStack Orientation=Orientation.Horizontal AlignItems=AlignItems.Center>
                                        <RadzenIcon Icon="person" /> <RadzenLabel Text=@user.UserName />
                                    </RadzenStack>
                                    <RadzenLabel Text=@($"({user.EmailAddress})") />
                                </RadzenStack>
                            </Template>
                        </RadzenAutoComplete>
                    </RadzenColumn>
                </RadzenRow>
                <RadzenStack Orientation=Orientation.Horizontal JustifyContent=JustifyContent.End class="rz-mt-5">
                    <RadzenButton Text="Cancel" ButtonStyle="ButtonStyle.Light" Size=ButtonSize.Small Icon="cancel" class="ms-1" Click="() => DialogService.Close()" Disabled=IsBusy />
                    <RadzenButton Text="Save" ButtonStyle="ButtonStyle.Primary" Size=ButtonSize.Small Icon="save" ButtonType="ButtonType.Submit" Disabled=IsSelectedUserNameInvalid() IsBusy=IsBusy />
                </RadzenStack>
            </ChildContent>
        </RadzenTemplateForm>
    </ChildContent>
</RadzenContent>

@code {
    class FormModel
    {
        public string? SelectedUserName { get; set; }
    }

    FormModel model = new();

    public List<UserInfo> Users { get; set; } = [];


    private bool IsBusy { get; set; }
    private bool IsLoading { get; set; }

    private IUserService UserService = new UserService();

    private void SelectUser()
    {
        DialogService.Close(model.SelectedUserName);
    }

    private bool IsSelectedUserNameInvalid()
        => !Users.Any(u => u.UserName == model.SelectedUserName);

    private async Task OnLoadData(LoadDataArgs args)
    {
        Users = await UserService.FindUsersAsync(args.Filter);
        StateHasChanged();
    }
}
3

Perfect, made the change and it's working now. Thank you!