Getting JSInterop null exception in GetBoundingClientRect when trying <PortRenderer> with child content without CSS position:absolute

[konst-sh]

I'm getting this exception, if on NET8 with interactive server side rendering I try to use PortRenderer with child content like that:

<div>
    <h5 class="card-title">@Node.Instance.OwnDeclaration.Name</h5>
    @foreach (var port in Node.Ports)
    {
        <div>
            <PortRenderer @key="port" Port="port">
                <div>
                    @((port as IInstancePort)?.Name ?? "unknown name")
                </div>
            </PortRenderer>
        </div>
    }
</div>

@code {
    [Parameter] public InstanceModel? Node { get; set; } = null; //InstanceModel
}

and in CSS the position: absolute is disabled:

::deep .diagram-port {
    width: 100%;
    height: 100%;
/*    position:  absolute;*/
    background: #c1bfbe;
}

[2024-12-27T12:42:59.749Z] Error: Microsoft.JSInterop.JSException: n is null
getBoundingClientRect@https://localhost:7040/_content/Z.Blazor.Diagrams/script.min.js:1:56
beginInvokeJSFromDotNet/i<@https://localhost:7040/_framework/blazor.web.js:1:3047
beginInvokeJSFromDotNet@https://localhost:7040/_framework/blazor.web.js:1:3004
_invokeClientMethod@https://localhost:7040/_framework/blazor.web.js:1:62730
_processIncomingData@https://localhost:7040/_framework/blazor.web.js:1:60119
gn/this.connection.onreceive@https://localhost:7040/_framework/blazor.web.js:1:53760
connect/</i.onmessage@https://localhost:7040/_framework/blazor.web.js:1:81866
at Microsoft.JSInterop.JSRuntime.InvokeAsync[TValue](Int64 targetInstanceId, String identifier, Object[] args)
at Blazor.Diagrams.Extensions.JSRuntimeExtensions.GetBoundingClientRect(IJSRuntime jsRuntime, ElementReference element)
at Blazor.Diagrams.Components.Renderers.PortRenderer.UpdateDimensions()
at Blazor.Diagrams.Components.Renderers.PortRenderer.OnPortChanged(Model _)
at System.Threading.Tasks.Task.<>c.b__128_0(Object state)
at Microsoft.AspNetCore.Components.Rendering.RendererSynchronizationContext.PostAsync[TState](Task antecedent, Action`1 callback, TState state)

[konst-sh]

are we only allowed to use css position: absolute for ports? I would prefer to render ports as elements with custom content but absolute position makes it so weird.

[zHaytam]

I'm not really sure about this, the error doesn't look like it's related to the position, do you have time to create a small repo that shows this issue?

[konst-sh]

@zHaytam this reproduces the issue for me. The diagram will throw the error, if I try to create link from any port with child content, when the position:absolute i commented out in CSS. Thanks for this awesome library, btw!

FSBuilder-diagram node non-absolute positioning issue.zip