[Bug]: dialog flashes in middle of screen and reappears with animation

[PmE8HW0KRfqa]

Contact Details

No response

What happened?

When using the below code, a dialog window flashes briefly in the middle of the screen, disappears, and reappears with an animation. The delay before it disappears is longer if the @rendermode InteractiveServer directive is removed. If I click the "Edit Test Button" a second time, the dialog appears as expected (without the flashing behavior).

This is an asp 8.0 application (not WASM).

@rendermode InteractiveServer
@page "/"

@using MudBlazor.Extensions.Options;

@using System.ComponentModel.DataAnnotations

@inject IJSRuntime Js
@inject IDialogService dialogService;

<MudButton OnClick="@ShowSampleDialog" Variant="Variant.Filled" Color="Color.Primary">Edit Test Object</MudButton>

@code {

    public class TestObject
    {
        [Required]
        public string Value { get; set; } = "Test";
        [Range(1, 100)]
        public int Number { get; set; }
    }

    private async Task ShowSampleDialog()
    {
        DialogOptionsEx dlgOptions = new()
        {
            MaximizeButton = true,
            CloseButton = true,
            FullHeight = false,
            CloseOnEscapeKey = true,
            MaxWidth = MaxWidth.Medium,
            FullWidth = false,
            DragMode = MudDialogDragMode.Simple,
            Animations = new[] { AnimationType.SlideIn },
            DisableSizeMarginY = true,
            DisablePositionMargin = true,
            // ShowAtCursor = true,
            // CursorPositionOrigin = Origin.TopLeft
        };
        var res = await dialogService.EditObject(new TestObject(), "Auto Generated Editor for TestObject", OnSubmit, dlgOptions, meta => meta.WrapEachInMudItem(i => i.xs = 6));
        if (!res.Cancelled)
            await Js.InvokeVoidAsync("alert", "Save");
    }

    private async Task<string> OnSubmit(TestObject value, MudExObjectEditDialog<TestObject> dialog)
    {
        await Task.Delay(2000); // Simulate server save
        if (value.Value == "Test")
            return "'Test' is as Value not allowed or already exists";
        if (value.Value == "Exception")
            throw new Exception("This is a test exception");
        return null;
    }

}

Expected Behavior

I expect the dialog to slide-in from the top and not briefly flash in the center of the screen.

Screenshots

No response

Reproduction link

No response

What application type are you referring to?

ServerRendered

Custom Application Type

No response

MudBlazor.Extension Version

1.7.83

MudBlazor Version

6.15.0

What browser are you using?

Chrome, Firefox, Other

Sample Solution

No response

Pull Request

No response

Code of Conduct

• [X] I agree to follow this project's Code of Conduct

[fgilde]

Please add the styles then manually to your index.html or _host.cshtml

<link id="mudex-styles" href="_content/MudBlazor.Extensions/mudBlazorExtensions.min.css" rel="stylesheet">

And then please use the config WithoutAutomaticCssLoading on the AddMudExtensions or AddMudServicesWithExtensions service registration method

builder.Services.AddMudServicesWithExtensions(c => c.WithoutAutomaticCssLoading());

[PmE8HW0KRfqa]

@fgilde your fix works as expected. Thank you for the support and wonderful tool.