Blazor WASM Custom javascript dispatching of new Event Gets Triggered Twice

[stevenpua]

Is there an existing issue for this?

• I have searched the existing issues

Describe the bug

I'm using Blazor .NET 8 WASM

I'm planning to do listening of scroll bottom or specialized scroll bottom with padding. But when i use el.dispatchEvent(new Event('onscrolltop', {bubbles:true}))

with blazor event @onscrolltop="MyCallback" the blazor code is triggered twice.

Expected Behavior

event should only trigger once.

Steps To Reproduce

to replicate

dotnet new blazor -int WebAssembly -ai -o TestBlazor1

add TestBlazor1.Client/wwwroot/TestBlazor1.Client.lib.module.js

export function afterWebStarted(blazor) {
    blazor.registerCustomEventType('scrolltop', {
      browserEventName: 'scrolltop',
      createEventArgs: evt=>({
        scrollTop: evt.target.scrollTop,
        scrollLeft: evt.target.scrollLeft

      })
    //   createEventArgs: eventArgsCreator
    });
  }

add TestBlazor1.Client/Pages/Test.razor

@page "/test"

<h3>Test</h3>
<div
style='height: 200px; overflow-y: scroll; border: 1px solid black;'
@onscrolltop="ConsoleWrite"
@onscrolltop:stopPropagation="true"
thisisnotevent-onscroll="this.dispatchEvent(new Event('scrolltop', {bubbles:true}));"
onclick="this.dispatchEvent(new Event('scrolltop', {bubbles:true}));">

@for(var i = 0; i< 10000; ++i)
{
    <div>Item @i</div>
}

</div>

@code{

    private void ConsoleWrite(ScrollEventArgs evt)
    {
        Console.WriteLine("Scroll Top Triggered " + evt.ScrollLeft + " , " + evt.ScrollTop);

    }
}

add TestBlazor1.Client/EventHandlers.cs

using Microsoft.AspNetCore.Components;

namespace TestBlazor1.Client;


public class ScrollEventArgs : EventArgs
{
    public double ScrollTop { get; set; }
    public double ScrollLeft{get;set;}
}

[EventHandler("onscrolltop", typeof(ScrollEventArgs),
    enableStopPropagation: true, enablePreventDefault: true)]
public static class EventHandlers
{
}

When clicking the div with list of entries. the event will trigger twice. I tried @onscrolltop:stopPropagation="true", but it still triggers twice. Removing bubble will not trigger the event. I also tried javascript onscroll, it also triggers twice

Exceptions (if any)

No response

.NET Version

8.0.302

Anything else?

Microsoft.AspNetCore.Components.WebAssembly Version="8.0.6"

dotnet --info output

.NET SDK:
Version: 8.0.302
Commit: ef14e02af8
Workload version: 8.0.300-manifests.5273bb1c
MSBuild version: 17.10.4+10fbfbf2e

Runtime Environment:
OS Name: Windows
OS Version: 10.0.22631
OS Platform: Windows
RID: win-x64
Base Path: C:\Program Files\dotnet\sdk\8.0.302\

.NET workloads installed:
[aspire]
Installation Source: VS 17.10.35013.160
Manifest Version: 8.0.0/8.0.100
Manifest Path: C:\Program Files\dotnet\sdk-manifests\8.0.100\microsoft.net.sdk.aspire\8.0.0\WorkloadManifest.json
Install Type: FileBased

Host:
Version: 8.0.6
Architecture: x64
Commit: 3b8b000a0e

.NET SDKs installed:
8.0.204 [C:\Program Files\dotnet\sdk]
8.0.302 [C:\Program Files\dotnet\sdk]

.NET runtimes installed:
Microsoft.AspNetCore.App 8.0.4 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
Microsoft.AspNetCore.App 8.0.6 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
Microsoft.NETCore.App 8.0.4 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
Microsoft.NETCore.App 8.0.6 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
Microsoft.WindowsDesktop.App 8.0.4 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App]
Microsoft.WindowsDesktop.App 8.0.6 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App]

Other architectures found:
x86 [C:\Program Files (x86)\dotnet]
registered at [HKLM\SOFTWARE\dotnet\Setup\InstalledVersions\x86\InstallLocation]

Environment variables:
Not set

global.json file:
Not found

Learn more:
https://aka.ms/dotnet/info

Download .NET:
https://aka.ms/dotnet/download

[javiercn]

@stevenpua thanks for contacting us.

@onscrolltop="ConsoleWrite"
@onscrolltop:stopPropagation="true"
onscroll1="this.dispatchEvent(new Event('scrolltop', {bubbles:true}));"
onclick="this.dispatchEvent(new Event('scrolltop', {bubbles:true}));">

You seem to have registered two separate events here, isn't that the reason for the double dispatch?

[stevenpua]

Hi @javiercn, Thank you for the quick response. The onscroll1 is just a way to disable and switch which event I want to test. e.g. if i want to use the onscroll, I'll remove the 1 from the onscroll and add it to the onclick

onscroll="..."
onclick1="..." 

onclick1 is not element event
onscroll is now element event

i'll fix the above so it is easier to understand

[SteveSandersonMS]

I think the issue is that you've registered a custom event with the same name as a browser event, so when it fires, you receive both the initial browser event and the wrapper event you've defined.

To avoid this, simply remove the browserEventName property from your registration.

You should use browserEventName only when wrapping a native event with a custom event, and you must give your custom event a different name from the native event.