Register custom event handlers in DOM and handle those in .NET is not working in .NET 6.0

[msbasanth]

Describe the bug

I followed the writeup @dotnet/AspNetCore.Docs#21763 for checking custom event args feature in Blazor - "Register custom event handlers in DOM and handle those in .NET".

But unable to get the custom events triggered from custom elements handled in .NET.

To Reproduce

Environment:

.NET 6.0 RC
Microsoft Visual Studio Community 2022 Preview (64-bit)
Version 17.0.0 Preview 4.1

What I did?

1. index.html

<script>
        Blazor.registerCustomEventType('closed', {
            createEventArgs: { customProperty1: 'any value for property 1' }
        });
    </script>

2. define a class for the event args

@code {

    public class CustomEventArgs : EventArgs {
        public string CustomProperty1 {get; set;}
    }
}

3. wire up the custom event with the event args by adding an EventHandler attribute annotation for your custom event:

[EventHandler("onclosed", typeof(CustomEventArgs), enableStopPropagation: true, enablePreventDefault: true)]
static class EventHandlers
{
}

4. Register your event handler on my custom element:

<custom-control @onclosed="HandleCustomEvent">Handle</custom-control>

@code
{
    void HandleCustomEvent(CustomEventArgs eventArgs)
    {
        // here you can access the data which was passed in from the Javascript side
    }
}

Further technical details

dotnet --info

.NET SDK (reflecting any global.json):
 Version:   6.0.100-rc.1.21463.6
 Commit:    e627d556a1

Runtime Environment:
 OS Name:     Windows
 OS Version:  10.0.18363
 OS Platform: Windows
 RID:         win10-x64
 Base Path:   C:\Program Files\dotnet\sdk\6.0.100-rc.1.21463.6\

Host (useful for support):
  Version: 6.0.0-rc.1.21451.13
  Commit:  d7619cd4b1

.NET SDKs installed:
  3.1.412 [C:\Program Files\dotnet\sdk]
  5.0.301 [C:\Program Files\dotnet\sdk]
  5.0.303 [C:\Program Files\dotnet\sdk]
  6.0.100-rc.1.21463.6 [C:\Program Files\dotnet\sdk]

.NET runtimes installed:
  Microsoft.AspNetCore.All 2.1.28 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.All]
  Microsoft.AspNetCore.All 2.1.30 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.All]
  Microsoft.AspNetCore.All 2.2.8 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.All]
  Microsoft.AspNetCore.App 2.1.28 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
  Microsoft.AspNetCore.App 2.1.30 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
  Microsoft.AspNetCore.App 2.2.8 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
  Microsoft.AspNetCore.App 3.0.3 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
  Microsoft.AspNetCore.App 3.1.16 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
  Microsoft.AspNetCore.App 3.1.18 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
  Microsoft.AspNetCore.App 5.0.7 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
  Microsoft.AspNetCore.App 5.0.9 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
  Microsoft.AspNetCore.App 6.0.0-rc.1.21452.15 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
  Microsoft.NETCore.App 2.1.28 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
  Microsoft.NETCore.App 2.1.30 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
  Microsoft.NETCore.App 2.2.8 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
  Microsoft.NETCore.App 3.0.3 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
  Microsoft.NETCore.App 3.1.16 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
  Microsoft.NETCore.App 3.1.18 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
  Microsoft.NETCore.App 5.0.7 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
  Microsoft.NETCore.App 5.0.8 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
  Microsoft.NETCore.App 5.0.9 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
  Microsoft.NETCore.App 6.0.0-rc.1.21451.13 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
  Microsoft.WindowsDesktop.App 3.0.3 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App]
  Microsoft.WindowsDesktop.App 3.1.16 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App]
  Microsoft.WindowsDesktop.App 3.1.18 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App]
  Microsoft.WindowsDesktop.App 5.0.7 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App]
  Microsoft.WindowsDesktop.App 5.0.9 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App]
  Microsoft.WindowsDesktop.App 6.0.0-rc.1.21451.3 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App]

To install additional .NET runtimes or SDKs:
  https://aka.ms/dotnet-download

Now, whenever the custom event ("closed") is fired by custom-control, my event handler is not getting called. Anything I am missing, do you have a working sample?

[mkArtakMSFT]

Thanks for contacting us. Please share a minimal sample project hosted on GitHub as it's easy to miss details otherwise.

[msbasanth]

@mkArtakMSFT

I created a sample @https://github.com/msbasanth/BlazorFeatureTester using Blazor WebAssembly template.
lit-button is the custom element name and closed is the event name,

<lit-button class="primary" @onclosed="HandleCustomEvent">Primary</lit-button>

Modified files,

• BlazorFeatureTester/BlazorTesterApp/Client/wwwroot/index.html
• BlazorFeatureTester/BlazorTesterApp/Client/Pages/Index.razor

[SteveSandersonMS]

Thanks for reporting this.

I just checked, and the feature does work. What's missing in your code is that your [EventHandler] class can't be found by the compiler because it's nested inside a .razor class. You need to move it out into a regular .cs file so it can become a normal top-level class. Also make sure it's public and is in a namespace that's imported to the .razor file you're trying to use the event inside.

Once you have this correct, you should see it light up in purple in the tooling.

Example: this event was found and will work

Example: this one was not found and won't work

[msbasanth]

@SteveSandersonMS Thanks for detailing the changes needed. Custom events and custom event arguments worked fine.