bind:after is not firing after selecting an option in Blazor WASM app

I have a simple select in my Blazor WASM Standalone app (targeting .NET 9) and I want to perform some action after user selects an option. I understand for async calls, Microsoft now recommends using bind:after.

I'm following this video and doing exactly what he does in his tutorial but in my case I don't hit the break point I place in DoSomething() method in my code. What am I doing wrong here?

<div>
    <select @bind="SelectedState" @bind:after="DoSomething">
        <option value="">Please select one</option>
        <option value="AK">Alaska</option>
        <option value="MT">Montana</option>
        <option value="WY">Wyoming</option>
    </select>
</div>

@code {

    private string SelectedState;

    private async Task DoSomething()
    {
        var userSelected = SelectedState; // Have a break point here but don't hit it
    }
}

The question is a little misleading which lead me astray in my initial answer. Reading @NickPattman's now deleted answer and comments got me on the right track.

The problem is not that the event isn't firing. It is. It's that the breakpoint is being ignored by the WASM debugger when the change event is driven by a mouse click. The problem doesn't exist in Server.

The really weird bit is it works if you use the keyboard up and down arrows to change the value, which is the workaround if you need the breakpoint to be hit!

So it's not a code issue [the event works and fires], it's a weird debugger problem. It's been reported, as referenced by @NickPattman, but to date not resolved.

https://github.com/dotnet/aspnetcore/issues/60018

For the record, the @bind:after isn't really a separate event. The Razor compiler builds inline code attached to the OnChange event like this:

    private Task OnChangeHandler(string __value)
    {
        SelectedState = __value;
        return Microsoft.AspNetCore.Components.CompilerServices.RuntimeHelpers.InvokeAsynchronousDelegate(
            callback: DoSomethingAsync);
    }

Original Answer

Not sure how you have your application configured, but your code should work.

Note: If you are pre-rendering, the page will be "static" during the initial Server side Rendered period.

Here's my Demo page:

@page "/"

<PageTitle>Home</PageTitle>

<h1>Hello, world!</h1>

Welcome to your new app.

<div>
    <select @bind="SelectedState" @bind:after="DoSomething">
        @if (SelectedState is null)
        {
            <option selected disabled value="">Please select one</option>
        }
        <option value="AK">Alaska</option>
        <option value="MT">Montana</option>
        <option value="WY">Wyoming</option>
    </select>
</div>

<div class="bg-dark text-white m-2 p-2">
    <pre>Value: @_message </pre>
</div>

@code {
    private string? SelectedState = null;
    private string? _message;

    private async Task DoSomething()
    {
        await Task.Yield();
        _message = SelectedState; // Have a break point here but don't hit it
    }
}

Demo Repo is here: https://github.com/ShaunCurtis/SO79542108