Issue with Tooltip and navigating to a page with a different layout

Radzen Studio Blazor WebAssembly
1

I suspect there is some issue with the Tooltip.

I have created a simple app in Radzen Studio to demonstrate. I have a page based on the Main Layout which has a button which has a tooltip on MouseEnter. Also on this page is a RadzenLink which navigates to a page that is based on another Layout.

Clicking on the Link navigates to the page without any issues.

However, if prior to clicking on the Link, I MouseEnter to show the Tooltip and then click the link, I get an error in the browser console as follows. I do have a simple app in Radzen Studio to demonstrate the issue if that is any help in diagnosing the issue.

Also noted that once the tooltip is displayed, even if I navigate to another page that is based on the Main Layout and then navigate to a page with a different layout, there is an issue. It's seems something happens when the tooltip is displayed to cause the issue.

Happy to provide any more info required to help isolate the issue.

  Unhandled exception rendering component: Cannot read properties of null (reading 'removeChild')
  TypeError: Cannot read properties of null (reading 'removeChild')
      at $ (http://localhost:5000/_framework/blazor.webassembly.js:1:16931)
      at $ (http://localhost:5000/_framework/blazor.webassembly.js:1:16901)
      at $ (http://localhost:5000/_framework/blazor.webassembly.js:1:16901)
      at ae.applyEdits (http://localhost:5000/_framework/blazor.webassembly.js:1:21104)
      at ae.updateComponent (http://localhost:5000/_framework/blazor.webassembly.js:1:20334)
      at http://localhost:5000/_framework/blazor.webassembly.js:1:56876
      at St.Te._internal.renderBatch (http://localhost:5000/_framework/blazor.webassembly.js:1:57248)
      at Object.Rt [as invokeJSFromDotNet] (http://localhost:5000/_framework/blazor.webassembly.js:1:59934)
      at _mono_wasm_invoke_js_blazor (http://localhost:5000/_framework/dotnet.6.0.12.qh9lbruwe7.js:1:195300)
      at wasm://wasm/00971d3e:wasm-function[3308]:0xc6107

Microsoft.JSInterop.JSException: Cannot read properties of null (reading 'removeChild')
TypeError: Cannot read properties of null (reading 'removeChild')
at $ (http://localhost:5000/_framework/blazor.webassembly.js:1:16931)
at $ (http://localhost:5000/_framework/blazor.webassembly.js:1:16901)
at $ (http://localhost:5000/_framework/blazor.webassembly.js:1:16901)
at ae.applyEdits (http://localhost:5000/_framework/blazor.webassembly.js:1:21104)
at ae.updateComponent (http://localhost:5000/_framework/blazor.webassembly.js:1:20334)
at http://localhost:5000/_framework/blazor.webassembly.js:1:56876
at St.Te._internal.renderBatch (http://localhost:5000/_framework/blazor.webassembly.js:1:57248)
at Object.Rt [as invokeJSFromDotNet] (http://localhost:5000/_framework/blazor.webassembly.js:1:59934)
at _mono_wasm_invoke_js_blazor (http://localhost:5000/_framework/dotnet.6.0.12.qh9lbruwe7.js:1:195300)
at wasm://wasm/00971d3e:wasm-function[3308]:0xc6107
at Microsoft.JSInterop.WebAssembly.WebAssemblyJSRuntime.InvokeUnmarshalled[Int32,RenderBatch,Object,Object](String identifier, Int32 arg0, RenderBatch arg1, Object arg2, Int64 targetInstanceId)
at Microsoft.JSInterop.WebAssembly.WebAssemblyJSRuntime.InvokeUnmarshalled[Int32,RenderBatch,Object](String identifier, Int32 arg0, RenderBatch arg1)
at Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer.UpdateDisplayAsync(RenderBatch& batch)
at Microsoft.AspNetCore.Components.RenderTree.Renderer.ProcessRenderQueue()
window.Module.s.printErr @ blazor.webassembly.js:1

2

You might need to place <RadzenTooltip /> in the other layout as well.

3

Both Layouts already have RadzenTooltip.

For the test project I created in Radzen Studio to recreate the issue, when a new layout is created RadzenTooltip was automatically added to both layouts.

Any other suggestions?

4

Hi @kirank,

Please send us your app where we can reproduce and debug this.

5

Hi

Here's a link to a project created in Radzen Studio:

From the Home Page in the App, if the link "Go to Plain Page" is clicked, there is no issue.

However, if from the Home Page, first hover over the button (ie. MouseEnter event) to display the tooltip and then click the link "Go to Plain Page", there is an issue.

Any assistance on this appreciated.

6

Hi @kirank,

I was able to reproduce the error however I'm still not sure how to fix it. The only workaround I can offer you is to define the following onclick attribute for the link that will open page with different layout:

onclick="event.preventDefault();window.location.href=event.currentTarget.href;"

We will continue to research this and hopefully we will have built-in fix soon.

7

Thank you @enchev

Very much appreciate you looking at this.

For your info, in my application, where I use this, is part of the ProfileMenu and one of the Items navigates to a page that is based on a different layout. ProfileMenuItem doesn't seem to support onclick.

So it impacts not just the Link Control but other Controls that are based on href.

Once again so appreciate your assistance with this and look forward to a built-in fix in due course

8

Hi @enchev

Found this link in the forum ToolTip - ToolTip Show - NavigateTo -- Cannot read property 'removeChild' of null - #3 by ggrewe

Closing the Tooltip on MouseLeave seems to work but requires someone to remember to add a MouseLeave everywhere the Tooltip is used.

Let me know if you think you're going to add an alternate solution.

Regards
Kiran

9

Hi @kirank,

We believe that we’ve fixed the problem and the fix will be part of our next update Monday.

1 Like
10

Thank you @enchev

Looking forward.

I'd be keen to understand the issue and how it was solved.

Regards
Kiran