aspnetcore icon indicating copy to clipboard operation
aspnetcore copied to clipboard

Blazor WASM Custom javascript dispatching of new Event Gets Triggered Twice

Open stevenpua opened this issue 1 year ago • 0 comments

Is there an existing issue for this?

  • [X] 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"
onscroll1="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

stevenpua avatar Jun 29 '24 08:06 stevenpua