[Bug] modal close event is causing codebehind fire start up cycle again and viewmodel to construct multi time

[paulhaggo1983]

Describe the bug
When I load the modal, the events you would expect fire. such as code behind SetParametersAsync, OnInitialized ,OnParametersSet and the linked viewmodel to fire the construct

When i close the modal, it fired them all again, have you even seen this issue please ?, we have just upgraded to .net8 Blazor Server

I call the modal with

var returnFilterData =
    await _dialogManager.OpenInterfaceAsModalAsync<IGridFilterEditor_View, GridFilterEditor_Output>("", inputs);

public async Task<O> OpenInterfaceAsModalAsync<T, O>(string title = null, IEnumerable<KeyValuePair<string, object>> inputs = null)
{
    var concreteImplementation = _serviceProvider.GetService<T>();
    var concreteType = concreteImplementation.GetType();
    return await OpenAsModalAsync<O>(concreteType, title, inputs);
}    

 public async Task<O> OpenAsModalAsync<O>(Type viewFragmentType, string title = null, IEnumerable<KeyValuePair<string, object>> inputs = null)
{
    if (inputs == null)
        inputs = new List<KeyValuePair<string, object>>();

    // Params
    var mp = new ModalParameters();
    mp.Add("ViewFragmentType", viewFragmentType);
    mp.Add("Inputs", inputs);

    // Options
    var mo = new ModalOptions { DisableBackgroundCancel = true, Position = ModalPosition.Middle , UseCustomLayout = true };

    // Open the form
    var modalForm = _modalService.Show<ModalHost_View>(title, mp, mo);
    var modalResult = await modalForm.Result;

    if (!(modalResult?.Confirmed ?? false)) return default;
    if (modalResult.Data == null) return default;
    if (modalResult.Data is not O) return default;

    return (O)modalResult.Data;
}

[FelipeCostaGualberto]

I'm also having this issue. Did you manage to find a solution?

[FelipeCostaGualberto]

I managed to fix it.

In BlazoredModal.razor, where you have:

@foreach (var modal in _modals)
{
    @modal.ModalInstance
}

You can make it work by adding a key on a wrapper element:

@foreach (var modal in _modals)
{
    <div @key="modal.Id">
        @modal.ModalInstance
    </div>
}

This works, but it changes the DOM by introducing a <div>. If you don’t want to change the DOM, use a zero-DOM wrapper component via DynamicComponent:

@foreach (var modal in _modals)
{
    <DynamicComponent @key="modal.Id"
                      Type="typeof(KeyedComponent)"
                      Parameters="KeyedParams(modal)" />
}

Where:

@code {
    private Dictionary<string, object?> KeyedParams(ModalReference modal) => new()
    {
        [nameof(KeyedComponent.ChildContent)] = modal.ModalInstance
    };
}

And the internal component (KeyedComponent.razor.cs) is:

using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Rendering;

namespace Blazored.Modal;

internal sealed class KeyedComponent : ComponentBase
{
    [Parameter] public RenderFragment ChildContent { get; set; } = default!;

    protected override void BuildRenderTree(RenderTreeBuilder builder)
        => ChildContent(builder);
}

I used DynamicComponent so the component can stay internal (no public API pollution) while still letting me apply @key to each item. This preserves keyed identity without adding extra DOM nodes.

Note: If you’re okay with a DOM node that doesn’t affect layout, another option is:

<div @key="modal.Id" style="display: contents">
    @modal.ModalInstance
</div>

This is still a real element (so keying works) but it doesn’t introduce a box in layout.