fix: System.ArgumentNullException: ArgumentNull_Generic Arg_ParamName_Name, jsObjectReference in [Blazor WASM] FluentDivider, FluentGrid and FluentTooltip

[Kratos-T]

🐛 Bug Report

I have this error on FluentDivider, FluentGrid , and FluentTooltip . It 's really random ; it happens when I access the page, and on the second reload of the page , it disappears.
System.ArgumentNullException: ArgumentNull_Generic Arg_ParamName_Name, jsObjectReference at System.ArgumentNullException.Throw(String ) at System.ArgumentNullException.ThrowIfNull(Object , String ) at Microsoft.JSInterop.JSObjectReferenceExtensions.InvokeVoidAsync(IJSObjectReference , String , Object[] ) at Microsoft.FluentUI.AspNetCore.Components.FluentGrid.OnAfterRenderAsync(Boolean firstRender) at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task , ComponentState )

System.ArgumentNullException: ArgumentNull_Generic Arg_ParamName_Name, jsObjectReference at System.ArgumentNullException.Throw(String ) at System.ArgumentNullException.ThrowIfNull(Object , String ) at Microsoft.JSInterop.JSObjectReferenceExtensions.InvokeVoidAsync(IJSObjectReference , String , Object[] ) at Microsoft.FluentUI.AspNetCore.Components.FluentDivider.OnAfterRenderAsync(Boolean firstRender) at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task , ComponentState )

System.ArgumentNullException: ArgumentNull_Generic Arg_ParamName_Name, jsObjectReference at System.ArgumentNullException.Throw(String ) at System.ArgumentNullException.ThrowIfNull(Object , String ) at Microsoft.JSInterop.JSObjectReferenceExtensions.InvokeVoidAsync(IJSObjectReference , String , Object[] ) at Microsoft.FluentUI.AspNetCore.Components.FluentTooltip.OnAfterRenderAsync(Boolean firstRender) at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task , ComponentState )

💻 Repro or Code Sample

this code is a componenent that is used in another compoenent in an upper level; this is an example of where the error related to FluentGrid happens

<FluentGrid Class="w-100" OnBreakpointEnter="OnGridSizeChange">
    <FluentGridItem Justify="JustifyContent.FlexStart" xs="12" sm="12" md="5" lg="5">
        <FluentStack Orientation="Orientation.Vertical" VerticalGap="0">
            <span><b>@i18n["contract.project"]</b> @i18n["project.from-quote"] </span>
        </FluentStack>
    </FluentGridItem>
    <FluentGridItem xs="12" sm="12" md="7" lg="7">
        <FluentStack HorizontalAlignment=@chipHorizontalAlignment>
            @if (!ReferenceProject.IsPersonneMorale)
            {
                <Chip Label=@(ReferenceProject.IsKycValid ? i18n["kyc.valid"] : i18n["kyc.invalid"])
                      Color=@(ReferenceProject.IsKycValid ? Color.Green : Color.Warning) />
            }
            
            <Icon Id="@(PlusOrminusIconHeader(IsMenuHeaderCollapsed))"
                  CssClass="px-2"
                  Height="40px"
                  Width="40px"
                  @onclick="DisplayHeaderMenu" />
        </FluentStack>
        
    </FluentGridItem>
    <FluentGridItem Justify="JustifyContent.FlexStart" xs="12" sm="12" md="12" lg="12">
        <FluentStack Orientation="Orientation.Vertical" VerticalGap="0">
            @if (!IsMenuHeaderCollapsed)
            {
                if (!SelectedProject.Warnings.IsNullOrEmpty())
                {
                    <ul>
                        @foreach (var message in SelectedProject.Warnings)
                        {
                            <li>@message</li>
                        }
                    </ul>
                }
                if (!SelectedProject.EndorsementContext.IsNullOrEmpty())
                {
                    <ul>
                        @foreach (var warningMessage in SelectedProject.EndorsementContext)
                        {
                            if (!string.IsNullOrEmpty(warningMessage.Value))
                            {
                                <li>@warningMessage.Value</li>
                            }
                        }
                    </ul>
                }
            }
        </FluentStack>
    </FluentGridItem>
</FluentGrid>
@code {

    private string PlusOrminusIconHeader(bool isMenuHeaderCollapsed) => isMenuHeaderCollapsed ? "carret-down" : "carret-up";

    private void DisplayHeaderMenu(MouseEventArgs args) => IsMenuHeaderCollapsed = !IsMenuHeaderCollapsed;

    private HeaderEndorsementInfo? headerInfoModel;

    private HorizontalAlignment chipHorizontalAlignment = HorizontalAlignment.End;

    private void OnGridSizeChange(GridItemSize gridSize)
        => chipHorizontalAlignment = gridSize <= GridItemSize.Sm ? HorizontalAlignment.Start : HorizontalAlignment.End;

    [Parameter]
    public string? SourceQuoteNumber { get; set; }

    [Parameter]
    public string? ProjectNumber { get; set; }

    [Parameter]
    public bool IsMenuHeaderCollapsed { get; set; }

    [Parameter]
    public ProjectModel ReferenceProject { get; set; } = new ProjectModel();

    [Parameter]
    public ProjectModel SelectedProject { get; set; } = new ProjectModel();

    [Parameter]
    public string? ExistingEndorsementProjectNumber { get; set; }

    protected override void OnInitialized()
    {
        var paymentSourceContract = ReferenceProject.DraftEndorsementData != null ? ReferenceProject.ReferencePayment : ReferenceProject.Quote.PaymentSourceContract;
        headerInfoModel = new HeaderEndorsementInfo(
                                ContractType.Project,
                                ReferenceProject.Quote.EndorsementReason,
                                ReferenceProject.Quote.Client.CodeClient,
                                ReferenceProject.Quote.Client.FullName,
                                ReferenceProject.Quote.SourceContract,
                                ReferenceProject.Quote.EndorsementData.FormulaCode,
                                ReferenceProject.Quote.EndorsementData.EndorsementEffectiveDate,
                                paymentSourceContract,
                                ExistingEndorsementProjectNumber);
    }
}

🤔 Expected Behavior

😯 Current Behavior

💁 Possible Solution

🔦 Context

🌍 Your Environment

• OS & Device: [ Windows 11 ] on [PC]
• Browser [ Microsoft Edge or Google Chrome ]
• .NET and Fluent UI Blazor library Version [ 8 and 4.10.4]

[vnbaaij]

Hi,

This is not code we can run and can therefore not investigate the issue. Also, supply us with the details about what version of the library is being used and in what kind of Blazor environment like rendermode (Server, WebAssembly, SRR) etc.

Standard reply follows:

Please supply us with ready-to-run reproduction code in the form of something we can copy/paste, a (zipped) project structure or a GitHub repository.

We do not have capacity to craft or compose a reproduction for every issue that gets raised.

If no code or repository is provided, this issue will be closed in 3 days

Help us to help you. Thanks.