Blazor webassembly: @onwheel:preventDefault has no effect

[sergey-su]

Describe the bug

Adding @onwheel:preventDefault attribute does not prevent the default scrolling behavior.

To Reproduce

In Counter demo project, on Index page

<h1 @onwheel:preventDefault>Hello, world!</h1>

The page still bumps up or down when I perform two fingers scroll gesture which indicates that the event was not suppressed.

Further technical details

Counter demo project on mac from command line. Versions:

    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="5.0.0-preview.7.20365.19" />
    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="5.0.0-preview.7.20365.19" PrivateAssets="all" />
    <PackageReference Include="System.Net.Http.Json" Version="5.0.0-preview.7.20364.11" />

Workarouond

interop.js:

window.myUtils = {
    addDefaultPreventingHandler: function (element, eventName) {
        element.addEventListener(eventName, e => e.preventDefault(), { passive: false });
    }
};

the page:

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    if (firstRender)
        await jsRuntime.InvokeVoidAsync("myUtils.addDefaultPreventingHandler", myElementReference, "wheel");
}

Possibly blazor does not set the passive option correctly when it adds its event listener. It should disable the scroll optimization by setting passive: false when @on<EVENT>:preventDefault is present for a scrolling event in the razor markup.

Thanks for contacting us.
We're moving this issue to the Next sprint planning milestone for future evaluation / consideration. We will evaluate the request when we are planning the work for the next milestone. To learn more about what to expect next and how this issue will be handled you can read more about our triage process here.

We've moved this issue to the Backlog milestone. This means that it is not going to be worked on for the coming release. We will reassess the backlog following the current release and consider this item at that time. To learn more about our issue management process and to have better expectation regarding different types of issues you can read our Triage Process.