I have a task list that users can check off from the list, which disappears because Show Completed Tasks is not checked. However, when the task disappears, the next task item is checked, smh which is undesired behavior. Do you see anything in the code below?
@page "/task-list"@inject IJSRuntime JS@rendermode InteractiveServer@using ClassLibrary1@inject TaskRepository TaskRepo@inject NavigationManager _navMgr<h3 class="my-0">Task List</h3><div class="mt-1">Active: @ActiveTaskCount</div><div class="mb-2">Completed: @CompletedTaskCount</div><button class="btn btn-success mb-3" @onclick="AddTask"><span class="me-2 oi oi-plus"></span>Add Task</button><div class="form-check form-switch mb-3 float-end"><input class="form-check-input" type="checkbox" id="showCompletedTasksCheckbox" @bind="showCompletedTasks"><label class="form-check-label" for="showCompletedTasksCheckbox">Show Completed Tasks</label></div>@if (tasks == null){<div class="spinner-border text-primary" role="status"><span class="visually-hidden">Loading...</span></div>}else{<table class="table table-striped table-hover"><thead class="table-dark"><tr><th></th> <!-- Drag handle column --><th>Task</th><th></th></tr></thead><tbody id="task-list"> @foreach (var task in tasks) { if (showCompletedTasks || !task.TaskCompleted) {<tr data-id="@task.Id"><td><i class="bi bi-grip-vertical" style="cursor: grab;"></i></td> <!-- Drag handle --><td><input type="checkbox" checked="@task.TaskCompleted" @onchange="@(async (e) => await ToggleTaskCompletion(task, (bool)e.Value))" /> @task.TaskName</td><td><div class="d-flex"><button class="me-1 border-0" style="background-color: transparent;" @onclick="() => EditTask(task.Id)"><span style="color: dimgrey;" class="bi bi-pencil"></span></button><button class="btn-sm border-0" style="background-color: transparent;" @onclick="() => DeleteTask(task.Id)"><span style="color: red;" class="bi bi-x-circle-fill"></span></button></div></td></tr> } }</tbody></table>}@code { private IEnumerable<ArcTask> tasks; private DotNetObjectReference<TaskList> dotNetRef; private bool showCompletedTasks = false; protected override async Task OnInitializedAsync() { tasks = await TaskRepo.GetAllAsync("TaskCompleted DESC, TaskPriority ASC"); dotNetRef = DotNetObjectReference.Create(this); UpdateTaskCounts(); } protected override async Task OnAfterRenderAsync(bool firstRender) { if (firstRender) { await Task.Delay(100); await JS.InvokeVoidAsync("initializeSortable", dotNetRef); } } [JSInvokable] public async Task UpdateTaskPriorities(string[] reorderedIds) { for (int i = 0; i < reorderedIds.Length; i++) { var taskId = Guid.Parse(reorderedIds[i]); var task = tasks.First(t => t.Id == taskId); task.TaskPriority = i + 1; // Assign new priority based on position await TaskRepo.UpdateAsync(task); } tasks = await TaskRepo.GetAllAsync("TaskCompleted DESC, TaskPriority ASC"); UpdateTaskCounts(); await InvokeAsync(StateHasChanged); } private void AddTask() { _navMgr.NavigateTo($"/task-detail/{Guid.Empty}"); } private void EditTask(Guid id) { _navMgr.NavigateTo($"/task-detail/{id}"); } private async Task DeleteTask(Guid id) { bool confirmed = await JS.InvokeAsync<bool>("confirm", "Are you sure you want to delete this item?"); if (confirmed) { await TaskRepo.DeleteAsync(id); tasks = await TaskRepo.GetAllAsync("TaskCompleted DESC, TaskPriority ASC"); UpdateTaskCounts(); } } private async Task ToggleTaskCompletion(ArcTask task, bool isCompleted) { task.TaskCompleted = isCompleted; await TaskRepo.UpdateAsync(task); tasks = await TaskRepo.GetAllAsync("TaskCompleted DESC, TaskPriority ASC"); } private int ActiveTaskCount => tasks?.Count(t => !t.TaskCompleted) ?? 0; private int CompletedTaskCount => tasks?.Count(t => t.TaskCompleted) ?? 0; private int TotalTaskCount => tasks?.Count() ?? 0; private void UpdateTaskCounts() { InvokeAsync(StateHasChanged); }}