[Blazor] Binding fails inside SVG foreignobject tag

[dmorrison42]

Describe the bug

Cannot bind to an input inside of a foreignobject svg tag.

Instead, the input tag fails to render completely with no errors in the web or server console.

To Reproduce

Attempt to do a bind inside of a foreignobject svg tag. (tested on server side blazor)

(Example)

<svg>
    <foreignobject style="overflow:visible">
        <input @bind="value" @bind:event="oninput" type="number"/> SVG Two way bind
    </foreignobject>
</svg>

Expected behavior

Bind works as with a native input.

Additional context

.NET Core SDK (reflecting any global.json):
 Version:   3.0.100-preview8-013656
 Commit:    8bf06ffc8d

Runtime Environment:
 OS Name:     Windows
 OS Version:  6.1.7601
 OS Platform: Windows
 RID:         win7-x64
 Base Path:   C:\Program Files\dotnet\sdk\3.0.100-preview8-013656\

Host (useful for support):
  Version: 3.0.0-preview8-28405-07
  Commit:  d01b2fb7bc

.NET Core SDKs installed:
  2.1.4 [C:\Program Files\dotnet\sdk]
  2.1.508 [C:\Program Files\dotnet\sdk]
  3.0.100-preview8-013656 [C:\Program Files\dotnet\sdk]

.NET Core runtimes installed:
  Microsoft.AspNetCore.All 2.1.12 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.All]
  Microsoft.AspNetCore.App 2.1.12 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
  Microsoft.AspNetCore.App 3.0.0-preview8.19405.7 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
  Microsoft.NETCore.App 2.0.5 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
  Microsoft.NETCore.App 2.1.12 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
  Microsoft.NETCore.App 3.0.0-preview8-28405-07 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
  Microsoft.WindowsDesktop.App 3.0.0-preview8-28405-07 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App]

To install additional .NET Core runtimes or SDKs:
  https://aka.ms/dotnet-download

[danroth27]

@dmorrison42 Thanks for reporting this issue! We know we have a bunch of issues with using SVGs with Blazor. For 3.0 we plan to document the known limitations and then we will look into addressing these issue more fully in a future release.

[danroth27]

#13280

[dmorrison42]

Thanks for the roadmap!

Does anyone know of a workaround?

The only one I've come up with thus far is to create my own input components in SVG, but that may run into other issues.

[Hinne123]

I stumbled across the same issue and didn't found a good workaround. I would love to see this bug fixed.

[gorban]

I encountered this issue as well.

It's not a workaround since I couldn't get any Blazor-bound foreignObject to display, but I was able to use Blazor JavaScript interop. It is painful, but from Blazor code, whenever the foreignObject gets created, I can use [IJSRuntime].InvokeVoidAsync extension method along with DotNetObjectReference.Create. The target JavaScript function has to attach my DOM events to the element and keep track of the DotNetObjectReference.Create parameter value. When the event fires, I have to use the parameter and call invokeMethodAsync to fire a JSInvokable-attributed method back in Blazor. With this approach, I faced an issue where the initial JavaScript interop fires before the DOM elements exist to attach events so you have to workaround that as well (such as with setTimeout). Also, you will may get a hard-to-diagnose error if you did not expose your JSInvokable-attributed method as public.

This is just for binding an event. Handling DOM updates inside the foreignObject have be all coded manually.

Please fix, thanks!

[mkArtakMSFT]

Closing as we will be tackling this as part of #18271