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"

@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

blazor maui hybrid js initializers not working

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"

@onanimationended="SomeMethod"

blazor maui hybrid js initializers not working

blazor maui hybrid js initializers not working

Similar Threads

Similar Threads

Similar Threads