Blazor WebAssembly - HTML select tag with @onchange event does not hit breakpoint when clicking to select values from dropdown using the cursor, but works with up/down key from keyboard

[sly97]

Is there an existing issue for this?

• I have searched the existing issues

Describe the bug

In .NET8, in a new Blazor WebAssembly app, when using a <select> tag, with the @onchange event, if I put a breakpoint in the method being triggered (i.e. @onchange="Test"), the breakpoint will not be hit if I click on different values in the dropdown using the mouse.
However, the breakpoint is being hit fine when using the up/down keys from the keyboard.

In addition, when using the mouse, I can see that the method is run and states are changed - the issue I experienced is the breakpoint that is not being hit.

Additional info: doing the same in .NET6 works fine, and breakpoint is being hit just fine in all cases.

@page "/"

<select @onchange="Test">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
</select>

@code {
    private void Test()
    {
        // Given I've put a breakpoint in VS in the line above
        // It does not get triggered/hit when using the mouse/cursor to click in the dropdown, but it is hit when using up/down key works.
    }
}

Expected Behavior

Breakpoint is being hit when using the mouse/cursor to select different values from a select statement with the @onchange event

Steps To Reproduce

1. Create a new Blazor Web Assembly project in VS2022.
2. Add a select tag to any page (I did it to the Counter component)
3. add the @onchange event to the select tag, and assign it with a method
4. Put a breakpoint in the method assigned to the @onchange event
5. Run the app, click on different values in the dropdown, and see that the breakpoint is not being hit.
   Then, try selecting using different values using the up/down keys from the keyboard, and the breakpoint should be hit

Exceptions (if any)

Breakpoint is hit when using the mouse to select different values from a dropdown menu.

.NET Version

8

Anything else?

No response

[javiercn]

@sly97 thanks for contacting us.

Can you validate that the same behavior works if you switch Blazor Server? Can you also make sure that the underlying JS event is fired on the browser debugger? (You should be able to set a breakpoint when the event is raised).

[Kevin-Lewis]

I've run into this same exact issue.

@page "/counter"
@rendermode @(new InteractiveWebAssemblyRenderMode(prerender: false))

<PageTitle>Counter</PageTitle>

<h1>Counter</h1>

<p role="status">Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

<select @onchange="SelectTest">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>

private int currentCount = 0;

private void IncrementCount()
{
    currentCount++;
}

public void SelectTest(ChangeEventArgs e)
{
    return;
}

I created a test web app project to verify. It works as expected when set to InteractiveServer but as the OP described when set to InteractiveWebAssembly.

[Kevin-Lewis]

@sly97 thanks for contacting us.

Can you validate that the same behavior works if you switch Blazor Server? Can you also make sure that the underlying JS event is fired on the browser debugger? (You should be able to set a breakpoint when the event is raised).

I also checked the underlying JS event and verified it is being fired as expected even when the breakpoint for my .NET event isn't hit. To summarize:

• Click on the select, navigate to an option with arrow keys, click on the option -> Works
• Click on the select, click on the option -> Does not Work
• Click on the select, navigate to an option with arrow keys, press enter key -> Does not Work

[sly97]

@javiercn
Apologies for the late reply.
I have checked and it seems to be working fine in Blazor Server (I've created a new project from VS, and chose the Blazor Server template option).
Also, thanks @Kevin-Lewis for your update, and can confirm that I get the same results when looking at the underlying JS events.
Can this issue please be re-opened as it seems to be a valid & ongoing issue?

[Marques01]

@javiercn the problem still persists in wasm. It only hits the breakpoint with the arrows and not with clicks on the select

<label class="form-label">Countries</label>
<select class="form-select" @onchange="OnCountryChanged">
    <option value="1">USA></option>
    <option value="2">Canada</option>
    <option value="3">Mexico</option>
</select>
@code {

    private void OnCountryChanged(ChangeEventArgs e)
    {
    }

}

[affenkonig11b]

Also seeing this. Any updates?