jeudi 9 septembre 2021

Blazor checkbox filtering strange rendering

I have a list of CheckModel classes with properties int Id and bool IsChecked. I want to filter them based on the IsChecked property.

When I render them in a foreach loop filtering the already checked items, I get buggy behavior. The item is removed from the view, but the item below that takes it's place in the view renders as checked, while in fact it is not.

Here is a gif showing this behavior:

enter image description here

It seems that Blazor's rendering somehow lags behind with the checkboxes.. Here is the code:

@page "/"

<div>
    <input id="filter-collected-checkbox" type="checkbox" @bind="FilterChecked" />
    <label for="filter-collected-checkbox">Filter</label>
</div>
@foreach((CheckModel item, int index) in CheckModels.Where(x=>!FilterChecked || !x.IsChecked).Select((x,i)=>(x,i)))
{
    <div style="display: flex">
        @item.Id
        <input id="item-collected-checkbox-@index" type="checkbox" checked="@item.IsChecked" @onchange="(e)=>MarkItemCollected(e,item)"/>
    </div>
}
@code {
    public List<CheckModel> CheckModels { get; set; }
    public bool FilterChecked { get; set; }
    protected override void OnInitialized()
    {
        CheckModels = new List<CheckModel>();
        for (int i = 0; i < 10; i++)
        {
            CheckModels.Add(new CheckModel() { Id = i });
        }
    }

    private void MarkItemCollected(ChangeEventArgs e, CheckModel item)
    {
        item.IsChecked = (bool)e.Value;
    }
}

The reason why I'm using html checked-attribute with @onchange is because I want to have a method after the binding has occurred. If I use @bind=IsChecked with @onclick=Method, the @onclick is fired before the binding.

Anyone know how to fix this?




Aucun commentaire:

Enregistrer un commentaire