[Blazor]StateHasChanged does not reflect immediately

[Kumima]

Is there an existing issue for this?

• I have searched the existing issues

Describe the bug

@page "/"
@inject IJSRuntime JSRuntime
<button @onclick="Add">Add new and Scroll</button>
<div style="overflow: auto; height: 100vh" id="container">
    @foreach (int _ in Enumerable.Range(0, 20))
    {
        <h1>PlaceHolder</h1>
    }
    @foreach (string content in _list)
    {
        <h1>@content</h1>
    }
</div>

@code
{
    private IJSObjectReference? _jsModule;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            _jsModule = await JSRuntime.InvokeAsync<IJSObjectReference>("import", "./Pages/Index.razor.js");
        }
    }

    private List<string> _list = new();

    private async Task Add()
    {
        _list.Add("New Content");
        StateHasChanged();
        await Task.Delay(100);//KEY CODE!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
        await _jsModule!.InvokeVoidAsync("ScrollToBottom", "container");
    }
}

export function ScrollToBottom(id) {
    const element = document.getElementById(id);
    if (element) {
        element.scrollTop = element.scrollHeight;
    }
}

The above code realizes the circumstance that when adding a new element, let the div scroll to the bottom. The problem is if the Task.Delay is removed, it won't scroll to the bottom, it will scroll to the last but one newly added element. Looks like if there is no Task.Delay, when the js invoked the DOM has not been updated.
Is this a BUG or I miss something?

Expected Behavior

The div should be scroll to the bottom without the Task.Delay.

Steps To Reproduce

No response

Exceptions (if any)

No response

.NET Version

7.0.8

Anything else?

No response

[MackinnonBuck]

StateHasChanged() doesn't render the component synchronously - it just adds the component to the render queue if it hasn't been added already, and that queue is processed asynchronously. Therefore, the DOM won't be updated by the time StateHasChanged() returns, and this behavior is intended.

Rather than invoking the "ScrollToBottom" JS function in your Add() method, you could call it in OnAfterRenderAsync() if some _shouldScrollToBottom field is true, at which point it should get set back to false. Then the Add() method calls StateHasChanged() as it does currently, plus it sets _shouldScrollToBottom to true so the scroll happens after the next render.

Hope this helps! Closing this out as by design.