2 issues with tooltip service

RobertRo · October 28, 2020, 11:12am

Hello,
trying to implement the radzen tooltip service into my code. when "embedding" it into a RadzenListBox i am able to produce a crash:

warn: Microsoft.AspNetCore.Components.Server.Circuits.RemoteRenderer[100]
Unhandled exception rendering component: TypeError: Cannot read property 'removeChild' of null
System.InvalidOperationException: TypeError: Cannot read property 'removeChild' of null
at Microsoft.AspNetCore.Components.RenderTree.Renderer.InvokeRenderCompletedCallsAfterUpdateDisplayTask(Task updateDisplayTask, Int32 updatedComponents)
fail: Microsoft.AspNetCore.Components.Server.Circuits.CircuitHost[111]
Unhandled exception in circuit 'PXhtKFo_X-D4SRq6ADXU6KXp8MtUsyGOMUkCbakmJnY'.
System.AggregateException: One or more errors occurred. (TypeError: Cannot read property 'removeChild' of null)
---> System.InvalidOperationException: TypeError: Cannot read property 'removeChild' of null
at Microsoft.AspNetCore.Components.RenderTree.Renderer.InvokeRenderCompletedCallsAfterUpdateDisplayTask(Task updateDisplayTask, Int32 updatedComponents)
--- End of inner exception stack trace ---

here's how i intend to use it: the black icons next to the listbox rows should be hoverable / show the tooltip

here is the code:

<RadzenListBox AllowClear="true" AllowFiltering="true" FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive" @bind-Value="selectedElements"
Multiple="true" Placeholder="Select..." Data="@allElements"
TextProperty="name" ValueProperty="id"
Style="width:100%;max-height:500px;margin-top:10px;">
                            <Template>
                                <RadzenIcon Icon="comment" MouseEnter="@(args => ShowTooltipWithHtml(args, (context as Check).reasoning))" MouseLeave="@(args => tooltipService.Close())" />
                                CHK-@((context as Check).id) - @((context as Check).name)
                            </Template>
                        </RadzenListBox>

whats happening is that when i move the mouse over the first icon, the tooltip appears:

as the tooltip does not wrap / has no maximum width, the browser scrollbar appears and the icon moves slightly up and left. now when it moves far enough so the cursor leaves the icon, the "MouseLeave" event happens and removes the tooltip.

this shifts the icon back into it's old position - MouseEnter happens, and the cycle repeats. with a bit of luck this produces a crash (not always).

i'm not really focussing on fixing the crash - is there a way to specify a maximum width (and maybe even height?) of the tooltip? i don't know how large it will be because it displays html content from a record in a database. this could even contain images.... but if this could be somehow limited to let's say a maximum width/height in pixels, or maximum width/height of screen percentage, then the scrollbar will never appear and the crash will not happen.

i was thinking of limiting the character count in the tooltip, but actually the problem is not the amount of text, just that it doesn't "wrap" at the right side of the screen.

i know this is pretty advanced usage of the control... sorry

enchev · October 28, 2020, 11:38am

Hi @RobertRo,

You can define custom HTML with styles similar to our demo.

RobertRo · November 16, 2020, 12:14pm

Hello,
i made some progress to fix the formatting a bit with CSS.

.rz-tooltip-content {
background: aliceblue;
white-space: normal;
margin-right: 50px;
margin-left: 50px;
padding: 10px;
height: 100%;
}

altough the tooltip now displays without resizing the page, i still cannot avoid the crash now and then.

for example, i placed tooltip icons in a list as shown in the screenshot. when i move the mouse vertically down over some of these tooltip icons, the page crashes at a random point in the list:

'iisexpress.exe' (CoreCLR: clrhost): Loaded 'C:\Program Files\dotnet\shared\Microsoft.NETCore.App\5.0.0\System.Reflection.Metadata.dll'. Skipped loading symbols. Module is optimized and the debugger option 'Just My Code' is enabled.
Microsoft.AspNetCore.Components.Server.Circuits.RemoteRenderer: Warning: Unhandled exception rendering component: TypeError: Cannot read property 'removeChild' of null

System.InvalidOperationException: TypeError: Cannot read property 'removeChild' of null
at Microsoft.AspNetCore.Components.RenderTree.Renderer.InvokeRenderCompletedCallsAfterUpdateDisplayTask(Task updateDisplayTask, Int32 updatedComponents)
Microsoft.AspNetCore.Components.Server.Circuits.CircuitHost: Error: Unhandled exception in circuit 'Jy7A6CPoW1mTodcNJ0LW7jkQ_GwWIaxz3t8SVal8ZA8'.

System.AggregateException: One or more errors occurred. (TypeError: Cannot read property 'removeChild' of null)
---> System.InvalidOperationException: TypeError: Cannot read property 'removeChild' of null
at Microsoft.AspNetCore.Components.RenderTree.Renderer.InvokeRenderCompletedCallsAfterUpdateDisplayTask(Task updateDisplayTask, Int32 updatedComponents)
--- End of inner exception stack trace ---

here's the relevant code

                        <RadzenListBox AllowClear="true" AllowFiltering="true" FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive" @bind-Value="selectedElements"
                                       Multiple="true" Placeholder="Select..." Data="@allElements"
                                       TextProperty="name" ValueProperty="id"
                                       Style="width:100%;max-height:500px;margin-top:10px;">

                            <Template>
                                <RadzenIcon Icon="comment" MouseEnter="@(args => ShowTooltipWithHtml(args, (context as Check).reasoning))" MouseLeave="@(args => tooltipService.Close())" Style="margin-right:4px;vertical-align:middle;" />
                                
                                CHK-@((context as Check).id) - @((context as Check).name)

                            </Template>
                        </RadzenListBox>

public void ShowTooltipWithHtml(ElementReference elementReference, string data)
{
    TTService.Open(elementReference, ds =>
    new RenderFragment(builder => { builder.AddMarkupContent(1, data); }),
    new TooltipOptions() { Position = TooltipPosition.Right, Style = "color:#000", Duration = null });
}

enchev · November 16, 2020, 1:31pm

The error is actually: Uncaught (in promise) Error: Microsoft.CSharp.RuntimeBinder.RuntimeBinderException: Cannot implicitly convert type 'void' to 'object'
because of this code:

Check again how our demo renders HTML:

void ShowTooltipWithHtml(ElementReference elementReference, TooltipOptions options = null) => tooltipService.Open(elementReference, ds =>
@<div>
    Some <b>HTML</b> content
</div>, options);
}

RobertRo · November 16, 2020, 2:21pm

hm. i can produce the crash with your demo function as well:

Microsoft.AspNetCore.Components.Server.Circuits.RemoteRenderer: Warning: Unhandled exception rendering component: TypeError: Cannot read property 'removeChild' of null

System.InvalidOperationException: TypeError: Cannot read property 'removeChild' of null
at Microsoft.AspNetCore.Components.RenderTree.Renderer.InvokeRenderCompletedCallsAfterUpdateDisplayTask(Task updateDisplayTask, Int32[] updatedComponents)
Microsoft.AspNetCore.Components.Server.Circuits.CircuitHost: Error: Unhandled exception in circuit 'kQzOkBEwq0qNpD0SInJkK9K3GVfCn-fAFOR6wwkhfkY'.

System.AggregateException: One or more errors occurred. (TypeError: Cannot read property 'removeChild' of null)
---> System.InvalidOperationException: TypeError: Cannot read property 'removeChild' of null
at Microsoft.AspNetCore.Components.RenderTree.Renderer.InvokeRenderCompletedCallsAfterUpdateDisplayTask(Task updateDisplayTask, Int32[] updatedComponents)
--- End of inner exception stack trace ---

should i try to reproduce this in a fresh dummy project?

enchev · November 16, 2020, 3:02pm

I've managed to reproduce the problem. It's not related to the tooltip - here is the minimal repro:

I'll check to see what's going on.

enchev · November 16, 2020, 3:10pm

I've managed to overcome this by changing void to Task:

public Task ShowTooltipWithHtml(ElementReference elementReference, string data)
{
            TooltipService.Open(elementReference, ds =>
            new RenderFragment(builder => { builder.AddMarkupContent(1, data); }),
            new TooltipOptions() { Position = TooltipPosition.Right, Style = "color:#000", Duration = null });

            return Task.CompletedTask;
}

and I've managed to reproduce the problem with removeChild - not sure however what's this since it is deeply in the heart of Blazor JavaScript:

I'll continue to research the problem.

enchev · November 17, 2020, 3:15pm

Good news! I was able to fix this and we will publish update before the end of the week.

enchev · November 17, 2020, 7:08pm

Radzen.Blazor 2.17.2 just published with fix for this included!

RobertRo · November 19, 2020, 2:16pm

super, it's working fine now. many thanks. i was able to convert all the tooltips to radzen library finally.

the only remaining issue is that sometimes the tooltip overflows the bottom of the page. i tried my best to fix, but my css knowledge is weak.

/* radzen tooltip */
.rz-tooltip-content {
background: aliceblue;
white-space: normal;
margin-right: 50px;
margin-left: 50px;
padding: 10px;

}
.rz-tooltip {
max-width:600px;
min-width:600px;
max-height:400px;
overflow:hidden;
}

i can live with this, it's an edge case. but if anyone has a tip to improve this i'd be grateful.
cheers