Need help figuring out why my panel is triggering twice!

[PascalVorwerk]

Hi! I just can't figure out why the following is happening:

Screen.Recording.2025-02-21.at.22.00.34.mov

Has anyone had this experience before? I am trying to open the panel on a double click row event from a remote data grid. here is some code:

@using MIC.Business.Models

<FluentStack>
    <FluentStack>
        <FluentSearch Style="width: 280px" Placeholder="Zoek" @bind-Value="_userQuery.Search" Immediate="true"
                      ImmediateDelay="300"/>
        <FluentSpacer/>
        <FluentButton Appearance="Appearance.Outline" IconStart="@(new Icons.Regular.Size20.ArrowDownload())">
            <FluentLabel Weight="FontWeight.Bold">Exporteer naar Excel</FluentLabel>
        </FluentButton>
    </FluentStack>
</FluentStack>


<FluentDataGrid TGridItem="GetUserResponse"
                ItemsProvider="_userProvider"
                Pagination="PaginationState"
                RowSize="DataGridRowSize.Medium"
                OnRowDoubleClick="OnSelectUser"
                Style="width: 100%; height: 100%;"
                @ref="_userGrid"
                AutoFit="true"
                ShowHover="true">

    <EmptyContent>
        <FluentLabel Typo="Typography.Body" Weight="FontWeight.Bold">Geen gebruikers gevonden</FluentLabel>
    </EmptyContent>

    <LoadingContent>
        <div style="width:100%; height: 100%;">
            <FluentProgressRing/>
        </div>
    </LoadingContent>

    <ChildContent>
        <TemplateColumn Title="Naam" SortBy="@_sortByName" Sortable="true" IsDefaultSortColumn>
            <FluentStack HorizontalGap="5" VerticalAlignment="VerticalAlignment.Center">
                <FluentPersona Name="@context.DisplayName" ImageSize="38px"/>
            </FluentStack>
        </TemplateColumn>
        <TemplateColumn Title="Type dienst" SortBy="@_sortByServiceType" Sortable="true">
            <span>@context.ServiceType.ToFriendlyString()</span>
        </TemplateColumn>
        <PropertyColumn Property="@(p => p.Email)" Title="Email" Sortable="true"/>

        <TemplateColumn Title="Status" Style="align-content: center; justify-content: center;">
            @if (context.DeletedAt != null)
            {
                <DeletedBadge/>
            }
            else
            {
                <ActiveBadge/>
            }
        </TemplateColumn>
    </ChildContent>
</FluentDataGrid>

<MccPaginator PaginationState="@PaginationState"/>

using MIC.Business.Models;
using MIC.Business.Queries;
using MIC.Data.Paging;
using MIC.Portal.Client.Components.Base.Interfaces;
using MIC.Portal.Client.Components.Panels;
using Microsoft.AspNetCore.Components;
using Microsoft.FluentUI.AspNetCore.Components;

namespace MIC.Portal.Client.Components.DataGrids;

public partial class UserGrid
{
    [Inject] private IMccHttpService HttpService { get; set; } = null!;
    [Inject] private IDialogService DialogService { get; set; } = null!;
    public PaginationState PaginationState { get; set; } = new()
    {
        ItemsPerPage = 10
    };

    private GridSort<GetUserResponse> _sortByName = GridSort<GetUserResponse>
        .ByAscending(p => p.DisplayName);
    
    private GridSort<GetUserResponse> _sortByServiceType = GridSort<GetUserResponse>
        .ByAscending(p => p.ServiceType);
    
    public bool Loading => _userGrid?.Loading ?? false;

    private FluentDataGrid<GetUserResponse>? _userGrid;
    private GridItemsProvider<GetUserResponse>? _userProvider;
    private readonly UserQuery _userQuery = new();
    
    
    protected override void OnInitialized()
    {
        _userProvider = async req =>
        {
            _userQuery.Page = PaginationState.CurrentPageIndex;
            _userQuery.ItemsPerPage = PaginationState.ItemsPerPage;
            
            var sortingRules = req.GetSortByProperties();
            if (sortingRules.Count > 0)
            {
                _userQuery.SortOn = sortingRules.First().PropertyName;
                _userQuery.SortAscending = req.SortByAscending;
            }
            
            var usersResult = await HttpService.GetAsync<Page<GetUserResponse>>($"api/users?{_userQuery.ToQueryString()}");

            if (usersResult != null)
            {
                return GridItemsProviderResult.From(
                    usersResult.Items.ToList(),
                    usersResult.PageInfo.TotalCount);
            }
            
            return GridItemsProviderResult.From(
                new List<GetUserResponse>(),
                0);
        };
    }

    private async Task OnSelectUser(FluentDataGridRow<GetUserResponse> user)
    {
        if (user.Item == null) return;
        
        
        var dialog = await DialogService.ShowPanelAsync<UserPanel>(user.Item, new DialogParameters()
        {
            PrimaryAction = "Sluiten",
            SecondaryActionEnabled = false,
            ShowDismiss = true
        });
        
        var result = await dialog.Result;
        
        
    }
}

using System.Net;
using System.Net.Http.Json;
using System.Text.Json;
using System.Text.Json.Serialization;
using MIC.Portal.Client.Components.Base.Interfaces;
using Microsoft.FluentUI.AspNetCore.Components;

namespace MIC.Portal.Client.Components.Base;

public class MccHttpService(IDialogService dialogService, IToastService toastService, HttpClient httpClient, ILogger<IMccHttpService> logger) : IMccHttpService
{
    private static JsonSerializerOptions JsonSerializerOptions => new()
        { PropertyNameCaseInsensitive = true, Converters = { new JsonStringEnumConverter() } };

    public async Task<T?> GetAsync<T>(string path)
    {
        var responseMessage = await httpClient.GetAsync(path);
        var isSuccess = responseMessage.IsSuccessStatusCode &&
                        responseMessage.StatusCode != HttpStatusCode.NoContent;

        if (!isSuccess)
        {
            ClientProblemDetails? clientProblemDetails = null;
            try
            {
                clientProblemDetails = await responseMessage.Content.ReadFromJsonAsync<ClientProblemDetails>(options: JsonSerializerOptions);
            }
            catch (JsonException ex)
            {
                logger.LogWarning("Failed to deserialize ClientProblemDetails: {Message}", ex.Message);
            }
            
            await ShowResultMessageAsync(false,
                clientProblemDetails?.Detail ?? GetMessageForHttpStatusCode(responseMessage.StatusCode));
            return default;
        }

        var responseObject = await responseMessage.Content.ReadFromJsonAsync<T>(options: JsonSerializerOptions);
        return responseObject;
    }
    

    public async Task<bool> PostAsync<T>(string path, T model, string? successMessage = null)
    {
        var responseMessage = await httpClient.PostAsJsonAsync(path, model, options: JsonSerializerOptions);
        var isSuccess = responseMessage.IsSuccessStatusCode;
        var message = isSuccess ? Resource.General_Success_SaveOrUpdate : Resource.General_Error_SaveOrUpdate;


        if (!isSuccess)
        {
            ClientProblemDetails? clientProblemDetails = null;
            try
            {
                clientProblemDetails = await responseMessage.Content.ReadFromJsonAsync<ClientProblemDetails>(options: JsonSerializerOptions);
            }
            catch (JsonException ex)
            {
                logger.LogWarning("Failed to deserialize ClientProblemDetails: {Message}", ex.Message);
            }
            
            await ShowResultMessageAsync(false,
                clientProblemDetails?.Detail ?? GetMessageForHttpStatusCode(responseMessage.StatusCode));
            return false;
        }

        await ShowResultMessageAsync(true, message);
        return true;
    }

    public async Task<bool> PutAsync<T>(string path, T model)
    {
        var responseMessage = await httpClient.PutAsJsonAsync(path, model, options: JsonSerializerOptions);
        var isSuccess = responseMessage.IsSuccessStatusCode;
        var message = isSuccess ? Resource.General_Success_SaveOrUpdate : Resource.General_Error_SaveOrUpdate;

        if (!isSuccess)
        {
            ClientProblemDetails? clientProblemDetails = null;
            try
            {
                clientProblemDetails = await responseMessage.Content.ReadFromJsonAsync<ClientProblemDetails>(options: JsonSerializerOptions);
            }
            catch (JsonException ex)
            {
                logger.LogWarning("Failed to deserialize ClientProblemDetails: {Message}", ex.Message);
            }
            
            await ShowResultMessageAsync(false,
                clientProblemDetails?.Detail ?? GetMessageForHttpStatusCode(responseMessage.StatusCode));
            return false;
        }

        await ShowResultMessageAsync(true, message);
        return true;
    }

    public async Task<bool> DeleteAsync(string path)
    {
        var responseMessage = await httpClient.DeleteAsync(path);
        var isSuccess = responseMessage.IsSuccessStatusCode;
        var message = isSuccess ? Resource.General_Success_Deleting_Data : Resource.General_Error_Deleting_Data;

        if (!isSuccess)
        {
            ClientProblemDetails? clientProblemDetails = null;
            try
            {
                clientProblemDetails = await responseMessage.Content.ReadFromJsonAsync<ClientProblemDetails>(options: JsonSerializerOptions);
            }
            catch (JsonException ex)
            {
                logger.LogWarning("Failed to deserialize ClientProblemDetails: {Message}", ex.Message);
            }
            
            await ShowResultMessageAsync(false,
                clientProblemDetails?.Detail ?? GetMessageForHttpStatusCode(responseMessage.StatusCode));
            return false;
        }
     
        await ShowResultMessageAsync(true, message);
        
        return isSuccess;
    }
    
    private async Task ShowResultMessageAsync(bool isSuccess, string message = "")
    {
        if (!isSuccess)
        {
            await dialogService.ShowErrorAsync(message, Resource.General_Error_Title);
        }
        else
        {
            if (string.IsNullOrWhiteSpace(message))
            {
                message = Resource.General_Success_SaveOrUpdate;
            }
            
            toastService.ShowToast(ToastIntent.Success, message);
        }
    }

    private string GetMessageForHttpStatusCode(HttpStatusCode code)
    {
        return code switch
        {
            HttpStatusCode.BadRequest => Resource.General_Error_BadRequest,
            HttpStatusCode.Unauthorized => Resource.General_Error_Forbidden,
            HttpStatusCode.Forbidden => Resource.General_Error_Forbidden,
            HttpStatusCode.NotFound => Resource.General_Error_NotFound,
            HttpStatusCode.Conflict => Resource.General_Error_Conflict,
            HttpStatusCode.InternalServerError => Resource.General_Error_InternalServerError,
            _ => Resource.General_Error_Default
        };
    }
}

@implements IDialogContentComponent<MIC.Business.Models.GetUserResponse>

<FluentDialogHeader>
    <FluentLabel Typo="Typography.H3" Weight="FontWeight.Bold"> @Content.ServiceType.ToFriendlyString() gebruiker</FluentLabel>
</FluentDialogHeader>

@if (_user == null)
{
    <FluentDialogBody>
        <FluentStack Style="width: 100%; height: 100%" VerticalAlignment="VerticalAlignment.Center" HorizontalAlignment="HorizontalAlignment.Center">
            <FluentProgressRing/>
        </FluentStack>
    </FluentDialogBody>
}
else
{
    <FluentDialogBody>
        <FluentLabel>Hello World</FluentLabel>
    </FluentDialogBody>
}
```csharp
using MIC.Business.Models;
using MIC.Portal.Client.Components.Base.Interfaces;
using Microsoft.AspNetCore.Components;

namespace MIC.Portal.Client.Components.Panels;

public partial class UserPanel
{
    [Inject] private IMccHttpService HttpService { get; set; } = null!;
    [Parameter] public GetUserResponse Content { get; set; } = null;
    
    private GetUserResponse? _user;

    protected override async Task OnParametersSetAsync()
    {
        _user = await HttpService.GetAsync<GetUserResponse>($"api/users/{Content.Id}");
    }
    
    
}

I just can't figure out why it is happening.. i've tried to reproduce the issue in the Demo website of this library.. but i can't. Any suggestions where to look are appreciated!

[PascalVorwerk]

I know it is a lot of code and if i had some reproducable code i would have loved to share it. I just can't seem to reproduce it though!

[PascalVorwerk]

Okay i have partially found the reason why.. for some reason everything in my MainLayout is rendered twice inside the body.. so probably also the DialogProvider... Now i have to figure out why everything is rendering twice...

[PascalVorwerk]

Okay i found the culprit... I feel stupid :')

I think this has been in this project for a while but i only just noticed because of the first time using a fluent dialog/panel