Blazor 子到父事件回调<list<string> &gt; 不触发</list<string>

Question

I'm creating a shared component for a multi-select dropdown in Blazor server-side. SelectMultiple.razor child component is not passing selected values back to the parent index.razor page. EventCallback<List> SelectedItemChanged in child component doesn't seem to be triggering. Can anyone help me out please?

Below is SelectMultiple.razor

<div>
    <div class="form-group mb-1">
        <button class="btn dropdown-toggle btn-light"
                @onclick="@ToggleSelectMultiple"
                title="@SelectedItemsText">
            @ButtonText
        </button>
    </div>
    <div hidden="@toggleSelectBox" class="border border-secondary rounded py-1">
        <div class="mx-1">
            <input class="form-control" @bind="FilterText" @bind:event="oninput" />
        </div>
        <div class="form-check mt-1">
            @foreach (var item in FilteredItems)
            {
                <label>
                    <input type="checkbox" class="mr-1" checked="@item.IsSelected"
                           @onchange="_e => { FilteredItemChanged(item.Item, _e.Value); }" />@item.Item
                    </label><br />
                }
        </div>
    </div>
</div>

@code{    
    //public class SelectedItem
    //{
    //    public string Item { get; set; }
    //    public bool IsSelected { get; set; }
    //}

    private string _filterText;
    private bool toggleSelectBox = true;
    private List<string> _selectedItems;

    [Parameter] public List<string> Elements { get; set; }
    [Parameter]
    public List<string> SelectedItems
    {
        get => _selectedItems;
        set
        {
            _selectedItems = value;
            SelectedItemChanged.InvokeAsync(SelectedItems);
        }
    }
    [Parameter] public EventCallback<List<string>> SelectedItemChanged { get; set; }

    public List<SelectedItem> FilteredItems { get; set; } = new();
    public string FilterText
    {
        get { return _filterText; }
        set
        {
            _filterText = value;
            if (!string.IsNullOrWhiteSpace(FilterText))
            {
                FilteredItems = Elements.Where(x => x.ToLower().Contains(FilterText))
                    .Select(x => new SelectedItem() { Item = x, IsSelected = SelectedItems.Contains(x) }).ToList();
            }
            else
            {
                FilteredItems = Elements.Select(x => new SelectedItem() { Item = x, IsSelected = SelectedItems.Contains(x) }).ToList();
            }
        }
    }
    public string SelectedItemsText { get; set; }
    public string ButtonText { get; set; } = "Nothing selected";

    protected override void OnInitialized()
    {
        Elements.ForEach(x => FilteredItems.Add(new SelectedItem() { Item = x }));
        base.OnInitialized();
    }

    public void FilteredItemChanged(string item, object checkedValue)
    {
        if ((bool)checkedValue)
        {
            SelectedItems.Add(item);
        }
        else
        {
            SelectedItems.Remove(item);
        }

        SelectedItemsText = SelectedItems.Any() ? string.Join(",", SelectedItems.Select(x => x)) : null;
        ButtonText = SelectedItems.Any()
            ? (SelectedItems.Count == 1 ? SelectedItemsText : $"{SelectedItems.Count} items selected")
            : "Nothing selected";
        StateHasChanged();
    }

    private void ToggleSelectMultiple()
    {
        toggleSelectBox = !toggleSelectBox;
        ClearSearchText();
    }

    private void ClearSearchText() => FilterText = null;
}

Here's my index.razor

@page "/"
<SelectMultiple Elements="Elements" SelectedItems="SelectedElements" SelectedItemChanged="SelectionChanged" />

<p>@SelectionAsText</p>
@code{
    public List<string> Elements { get; set; } = new List<string>() { "dog", "cat", "mouse", "hippo", "rat", "giraffe" };
    public List<string> SelectedElements { get; set; } = new();
    private string SelectionAsText;

    public void SelectionChanged()
    {
        SelectionAsText = string.Join(",", SelectedElements);
    }
}

Answer 1

This happens because you raise the event only when the List<string> variable changes, which in your code happens only once, during component's initialisation.

The source of confusion is that, during the entire component's lifetime, this List variable points to the same object, so it doesn't change . The contents of that list changes, yes, but not the reference to the List itself.

As a starting point, I recommend to add the InvokeAsync() to the FilteredItemChanged() function. You can figure out the rest from here.