Blazor checkbox filtering strange rendering - checkbox

Question

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:
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?

Answer 1

You need to use the #key for the loop contents so the Render engine knows what items need updating.
<div #key=#item.Id style="display: flex">
Docs are here
Working REPL
FYI:
<div>
<input id="filter-collected-checkbox" type="checkbox" #bind="filterChecked" />
<label for="filter-collected-checkbox">Filter</label>
</div>
#foreach(var item in FilteredItems)
{
<div #key=#item.Id style="display: flex">
#item.Id
<input id="item-collected-checkbox-#item.Id" type="checkbox" #bind="#item.IsChecked" />
</div>
}
#code {
List<CheckModel> checkModels = Enumerable.Range(0,10)
.Select(i => new CheckModel() { Id = i })
.ToList();
bool filterChecked;
IEnumerable<CheckModel> FilteredItems =>
filterChecked ? checkModels.Where(x=> !x.IsChecked) : checkModels;
}
Renders the same result.