Two-Way binding is not working in Blazorise Select control in Blazor Server

I am creating a project in .NET 6 Blazor Server. For UI control I have been using Blazorise controls. In my UI I have a Select control. Multiple items can be selected in this control. Here is my Model:

public class UserModel
{
    [Required]
    public string RepresentativeName { get; set; }

    public List<string> Departments { get; set; }
}

Here is my razor file code:

<Validations @ref="Validations" Mode="ValidationMode.Manual" Model="@model">
<div class="row">
    <div class="col-md-6 col-lg-6 col-sm-6">
        <Validation Validator="@ValidationRule.IsNotEmpty">
            <Field>
                <FieldLabel Class="p-0">First Name</FieldLabel><span class="red">*</span>
                <TextEdit @bind-Text="model.RepresentativeName " Placeholder="Enter First Name">
                    <Feedback>
                        <ValidationError>Name is required</ValidationError>
                    </Feedback>
                </TextEdit>
            </Field>
        </Validation>
    </div>

    <div class="col-md-6 col-lg-6 col-sm-6">
        <Validation Validator="IsDepartmentsValid">
            <Field>
                <FieldLabel>Departments</FieldLabel><span class="red">*</span>
                <Select Multiple @bind-SelectedValues="@model.Departments">
                    <ChildContent>
                        @if (departmentLists != null && departmentLists.Count > 0)
                        {
                            @foreach (var department in departmentLists)
                            {
                                <SelectItem Value="department.DepartmentId">
                                    @department.DepartmentName
                                </SelectItem>
                            }
                        }
                    </ChildContent>
                    <Feedback>
                        <ValidationError />
                    </Feedback>
                </Select>
            </Field>
        </Validation>
    </div>
</div>

<div class="row pt-3">
    <div class="col-12">
        <Button Color="Color.Primary" Clicked="SaveOrUpdateUser" Class="">Submit</Button>
        <Button Color="Color.Secondary" Clicked="NavigateToListPage" Class="ms-3">Cancel</Button>
    </div>
</div>
</Validations>

But when I build the project I get the below errors:

Error (active) CS1503 Argument 5: cannot convert from 'Microsoft.AspNetCore.Components.EventCallback<System.Collections.Generic.List>' to 'Microsoft.AspNetCore.Components.EventCallback<System.Collections.Generic.IReadOnlyList>'

Solution

The SelectedValues parameter type is IReadOnlyList<TValue> so you either have to change you model to:

public class UserModel
{
    [Required]
    public string RepresentativeName { get; set; }

    public IReadOnlyList<string> Departments { get; set; }
}

Or bind to the Departments property manually:

<Select TValue="string" 
        SelectedValues="@model.Departments" 
        SelectedValuesChanged="OnSelectedValuesChanged"
        Multiple>
    
    ...
</Select>

@code {
    private void OnSelectedValuesChanged(IReadOnlyList<string> values)
    {
        model.Departments = values.ToList();
    }
}

Or inline:

<Select TValue="string" 
        SelectedValues="@model.Departments" 
        SelectedValuesChanged="(values) => model.Departments = values.ToList()"
        Multiple>
    
    ...
</Select>