C#•5mo ago

blazor maui hybrid js initializers not working

Description: I wanted to display a modal the first time my app is launched and never display it again after modal button is clicked but since it has a sliding out animation I wanted to wait after the animation finishes and then set the flag _displayModal to false. Since Blazor doesn't have built-in event related to animation end and doing Task.Delay(animation duration) seemed unprofessional I decided to create custom event which Blazor allows me to do but it doesn't work. Here's the code that follows Microsoft documentation: Bonsai.lib.module.js located in wwwroot folder (Bonsai is the name of my project). I tried adding async and changing event to something like 'click' but it also doesn't work.

export function afterStarted(blazor) {
    blazor.registerCustomEventType('onanimationended', {
        browserEventName: 'animationend',
        createEventArgs: event => {
            return {
                animationName: event.animationName
            };
        }
    });
}

export function afterStarted(blazor) {
    blazor.registerCustomEventType('onanimationended', {
        browserEventName: 'animationend',
        createEventArgs: event => {
            return {
                animationName: event.animationName
            };
        }
    });
}

AnimationEndedEventArgs:

public class AnimationEndedEventArgs : EventArgs
{
    public string? AnimationName { get; set; }
}

public class AnimationEndedEventArgs : EventArgs
{
    public string? AnimationName { get; set; }
}

EventHandlers class:

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

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

And then when I want to put @onanimationended="SomeMethod" in my component just to Debug.WriteLine to check if it is working nothing gets written to debug output. What I tried: cleaning and rebuilding solution and project multiple times, turning Visual Studio off and on again, rebooting my PC, installing Microsoft.AspNetCore.Components.WebView in version 8.0.4 since it helped some people. I have latest .NET 8, probably latest MAUI and Visual Studio as well since I downloaded it like 2 weeks ago. I mainly tested this on Android emulator but on Windows it doesn't seem to work too. I'd really appreciate any help

1 Reply

MeWoshOP•5mo ago

okay so turns out the issue was quite silly: in Bonsai.lib.module.js in registerCustomEventType() the name of the event must not contain "on" at the beggining of its name, so in this case its name should be "animationended" instead of "onanimationend". In EventHandlers.cs name of the event stays the same.

Gaming

Programming

blazor maui hybrid js initializers not working