[HxPopover] JS Error when rendering new popover on existing page

[jim-craane]

Using Havit 3.2.8.

I get the following JS error when using the HxPopover:

In my context I render HxCards in a foreach and the BodyTemplate contains a HxPopover:

This works fine. But then you can add a new card via an HxModal. After rerendering the overview with the new card, this error is thrown and the application crashes.

Any idea what can go wrong here in the HxToolTipInternalBase.OnAfterRenderAsync?

Code look like this:

@foreach (var program in WashPrograms)
    {
        <div class="col-lg-4 col-md-6 col-sm-6 col-6">
            <HxCard
                CssClass="widget-bg-color-icon border btn-card">
                <BodyTemplate>
                    @if(EditMode)
                    {
                        <div class="position-absolute top-0 start-100 translate-middle" @onclick="() => ShowDeleteModal(program)">
                                <HxBadge
                                    Type="BadgeType.RoundedPill"
                                    Color="ThemeColor.Secondary">
                                        <i class="ri-close-line ri-2x"></i>
                                </HxBadge>
                        </div>
                    }
                    <div class="d-flex align-items-start" @onclick="() => ShowEditModal(program)">
                        <HxPopover
                            Placement="PopoverPlacement.Top"
                            Trigger="PopoverTrigger.Hover"
                               Content="@(program.IsUpsellingProgram ? Localizer["page.device.details.programs.type.upselling"] : Localizer["page.device.details.programs.type.regular"])">
                            <div class="avatar-lg rounded-circle bg-icon-primary text-center align-middle">
                                @if(program.IsUpsellingProgram){
                                    <i class="ri-arrow-up-fill ri-3x avatar-title"></i>
                                }
                                else
                                {
                                    <i class="ri-car-washing-line ri-3x avatar-title"></i>
                                }
                            </div>
                        </HxPopover>
                        <div class="flex-1 text-end align-self-center">
                            <h4 class="mt-0">@program.Name</h4>
                            <h5 class="mt-0">@Currency.Symbol @(((decimal)program.Price / Currency.Scale).ToString("#.00"))</h5>
                            @if(program.UpsellingId != null)
                                {
                                    <HxPopover
                                        Trigger="PopoverTrigger.Hover"
                                        Placement="PopoverPlacement.Bottom"
                                        Content="@GetUpsellingProgramName(program.UpsellingId.Value)">
                                        <p class="mb-0 text-info">@Localizer["page.device.details.programs.upselling"]</p>
                                    </HxPopover>
                                }
                        </div>
                    </div>
                </BodyTemplate>
            </HxCard>
        </div>
    }

[hakenr]

The setContent function is used when a content is to be updated on existing HxPopover instance. It does not seem that you really need to update the content of existing instance, but it rather originates from reusing the component instances as the loop items changes.¨

Try to use @key="some unique item identifier" in you code to help Blazor match the components when using the loop.
See https://learn.microsoft.com/en-us/aspnet/core/blazor/components/?view=aspnetcore-7.0#use-key-to-control-the-preservation-of-elements-and-components

If the @key won't help, please create a simple repro for us to be able to investigate the issue deeper.

[jim-craane]

Thank you for your response. The @key attribute solved the problem!