Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

.NET5 RC1 Blazor JS interop issue with HTML element return type. #26496

Closed
majorimi opened this issue Oct 1, 2020 · 4 comments
Closed

.NET5 RC1 Blazor JS interop issue with HTML element return type. #26496

majorimi opened this issue Oct 1, 2020 · 4 comments
Labels
area-blazor Includes: Blazor, Razor Components ✔️ Resolution: Answered Resolved because the question asked by the original author has been answered. Status: Resolved

Comments

@majorimi
Copy link

majorimi commented Oct 1, 2020

I have an issue with JS interop. In the following scenario JS should return an HTML element which is stored as ElementReference in Blazor. Later at some point in the code I would like to use the stored reference.
I know about the @ref="" usage but the problem is I have different components so cannot access the active element of the document.

Here is the JS

export function focusElement(element) { //This receives ElementReference from Blazor and works..
    if (element && typeof element.focus === "function") {
        element.focus();
    }
}

export function getFocusedElement() {
    return document.activeElement; //This should return HTML element as ElementReference to Blazor but fails...
}

Blazor code which tries to store the JSObjectReference

@inject IJSRuntime _jsRuntime;
...

JSObjectReference _focusJs = await _jsRuntime.InvokeAsync<JSObjectReference>("import", "./_content/<PACKAGE>/focus.js");
ElementReference _previousFocusedElement = await _focusJs.InvokeAsync<ElementReference>("getFocusedElement");

And it fails various errors based on the active HTML element type

In case of a element

blazor.webassembly.js:1 Uncaught (in promise) TypeError: Converting circular structure to JSON
    --> starting at object with constructor 'HTMLButtonElement'
    |     property '_blazorEvents_1' -> object with constructor 'e'
    |     property 'handlers' -> object with constructor 'Object'
    |     property 'click' -> object with constructor 'Object'
    --- property 'element' closes the circle
    at JSON.stringify (<anonymous>)
    at blazor.webassembly.js:1

In case of a simple

element

blazor.webassembly.js:1 crit: Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100]
      Unhandled exception rendering component: An exception occurred executing JS interop: __internalId is required.. See InnerException for more details.
Microsoft.JSInterop.JSException: An exception occurred executing JS interop: __internalId is required.. See InnerException for more details.
 ---> System.Text.Json.JsonException: __internalId is required.
   at Microsoft.AspNetCore.Components.ElementReferenceJsonConverter.Read(Utf8JsonReader& reader, Type typeToConvert, JsonSerializerOptions options)
   at System.Text.Json.Serialization.JsonConverter`1[[Microsoft.AspNetCore.Components.ElementReference, Microsoft.AspNetCore.Components, Version=5.0.0.0, Culture=neutral, PublicKeyToken=adb9793829ddae60]].TryRead(Utf8JsonReader& reader, Type typeToConvert, JsonSerializerOptions options, ReadStack& state, ElementReference& value)
   at System.Text.Json.Serialization.JsonConverter`1[[Microsoft.AspNetCore.Components.ElementReference, Microsoft.AspNetCore.Components, Version=5.0.0.0, Culture=neutral, PublicKeyToken=adb9793829ddae60]].ReadCore(Utf8JsonReader& reader, JsonSerializerOptions options, ReadStack& state)
   at System.Text.Json.Serialization.JsonConverter`1[[Microsoft.AspNetCore.Components.ElementReference, Microsoft.AspNetCore.Components, Version=5.0.0.0, Culture=neutral, PublicKeyToken=adb9793829ddae60]].ReadCoreAsObject(Utf8JsonReader& reader, JsonSerializerOptions options, ReadStack& state)
   at System.Text.Json.JsonSerializer.ReadCore[Object](JsonConverter jsonConverter, Utf8JsonReader& reader, JsonSerializerOptions options, ReadStack& state)
   at System.Text.Json.JsonSerializer.ReadValueCore[Object](JsonSerializerOptions options, Utf8JsonReader& reader, ReadStack& state)
   at System.Text.Json.JsonSerializer.Deserialize(Utf8JsonReader& reader, Type returnType, JsonSerializerOptions options)
   at Microsoft.JSInterop.JSRuntime.EndInvokeJS(Int64 taskId, Boolean succeeded, Utf8JsonReader& jsonReader)
   --- End of inner exception stack trace ---
   at Microsoft.JSInterop.JSRuntime.<InvokeAsync>d__16`1[[Microsoft.AspNetCore.Components.ElementReference, Microsoft.AspNetCore.Components, Version=5.0.0.0, Culture=neutral, PublicKeyToken=adb9793829ddae60]].MoveNext()
   at Blazor.Components.Dialog.ModalDialog.Open() in D:\Projects\GitHub\blazor-components\src\Blazor.Components.Dialog\ModalDialog.razor:line 86
   at Blazor.Components.TestApps.Common.Components.Modal.ShowDialog() in D:\Projects\GitHub\blazor-components\src\Blazor.Components.TestApps.Common\Components\Modal.razor:line 83
   at Microsoft.AspNetCore.Components.ComponentBase.CallStateHasChangedOnAsyncCompletion(Task task)
   at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle)
f.printErr @ blazor.webassembly.js:1
f.preRun.push.window.Blazor._internal.dotNetCriticalError @ blazor.webassembly.js:1
w @ blazor.webassembly.js:1
_mono_wasm_invoke_js_blazor @ dotnet.5.0.0-rc.1.20451.14.js:1
do_icall @ 00ab618a:0x1944fd
do_icall_wrapper @ 00ab618a:0x79894
interp_exec_method @ 00ab618a:0x4442c
interp_runtime_invoke @ 00ab618a:0x12e8ab
mono_jit_runtime_invoke @ 00ab618a:0x118342
do_runtime_invoke @ 00ab618a:0x797dd
mono_runtime_try_invoke @ 00ab618a:0x13aa6
mono_runtime_invoke @ 00ab618a:0x10e12a
mono_wasm_invoke_method @ 00ab618a:0x1084ab
Module._mono_wasm_invoke_method @ dotnet.5.0.0-rc.1.20451.14.js:1
call_method @ dotnet.5.0.0-rc.1.20451.14.js:1
(anonymous) @ dotnet.5.0.0-rc.1.20451.14.js:1
endInvokeJSFromDotNet @ blazor.webassembly.js:1
(anonymous) @ blazor.webassembly.js:1
Promise.then (async)
beginInvokeJSFromDotNet @ blazor.webassembly.js:1
w @ blazor.webassembly.js:1
_mono_wasm_invoke_js_blazor @ dotnet.5.0.0-rc.1.20451.14.js:1
do_icall @ 00ab618a:0x1944fd
do_icall_wrapper @ 00ab618a:0x79894
interp_exec_method @ 00ab618a:0x4442c
interp_runtime_invoke @ 00ab618a:0x12e8ab
mono_jit_runtime_invoke @ 00ab618a:0x118342
do_runtime_invoke @ 00ab618a:0x797dd
mono_runtime_invoke_checked @ 00ab618a:0xfee2
mono_runtime_try_invoke_array @ 00ab618a:0x10dd31
ves_icall_InternalInvoke @ 00ab618a:0xecc38
ves_icall_InternalInvoke_raw @ 00ab618a:0xec6fe
do_icall @ 00ab618a:0x19448a
do_icall_wrapper @ 00ab618a:0x79894
interp_exec_method @ 00ab618a:0x4442c
interp_runtime_invoke @ 00ab618a:0x12e8ab
mono_jit_runtime_invoke @ 00ab618a:0x118342
do_runtime_invoke @ 00ab618a:0x797dd
mono_runtime_try_invoke @ 00ab618a:0x13aa6
mono_runtime_invoke @ 00ab618a:0x10e12a
mono_wasm_invoke_method @ 00ab618a:0x1084ab
Module._mono_wasm_invoke_method @ dotnet.5.0.0-rc.1.20451.14.js:1
call_method @ dotnet.5.0.0-rc.1.20451.14.js:1
(anonymous) @ dotnet.5.0.0-rc.1.20451.14.js:1
beginInvokeDotNetFromJS @ blazor.webassembly.js:1
h @ blazor.webassembly.js:1
e.invokeMethodAsync @ blazor.webassembly.js:1
(anonymous) @ blazor.webassembly.js:1
invokeWhenHeapUnlocked @ blazor.webassembly.js:1
(anonymous) @ blazor.webassembly.js:1
t.dispatchEvent @ blazor.webassembly.js:1
(anonymous) @ blazor.webassembly.js:1
(anonymous) @ blazor.webassembly.js:1
e.onGlobalEvent @ blazor.webassembly.js:1
Show 23 more frames
blazor.webassembly.js:1 Unhandled exception rendering component: An exception occurred executing JS interop: __internalId is required.. See InnerException for more details.
blazor.webassembly.js:1 
f.printErr @ blazor.webassembly.js:1
put_char @ dotnet.5.0.0-rc.1.20451.14.js:1
write @ dotnet.5.0.0-rc.1.20451.14.js:1
write @ dotnet.5.0.0-rc.1.20451.14.js:1
doWritev @ dotnet.5.0.0-rc.1.20451.14.js:1
_fd_write @ dotnet.5.0.0-rc.1.20451.14.js:1
__stdio_write @ 00ab618a:0xd940d
__fwritex @ 00ab618a:0x7caa4
fwrite @ 00ab618a:0x6b55
fputs @ 00ab618a:0x59107
default_stderr_handler @ 00ab618a:0x197153
monoeg_g_printerr @ 00ab618a:0x19cbc
mono_print_unhandled_exception_internal @ 00ab618a:0x8d8b6
mono_unhandled_exception_checked @ 00ab618a:0x109fec
mono_unhandled_exception_internal @ 00ab618a:0x62483
mono_handle_exception_internal @ 00ab618a:0x93451
mono_handle_exception @ 00ab618a:0x93ba8
interp_throw @ 00ab618a:0x5edb
interp_exec_method @ 00ab618a:0x49161
interp_runtime_invoke @ 00ab618a:0x12e8ab
mono_jit_runtime_invoke @ 00ab618a:0x118342
do_runtime_invoke @ 00ab618a:0x797dd
mono_runtime_try_invoke @ 00ab618a:0x13aa6
mono_runtime_invoke @ 00ab618a:0x10e12a
mono_wasm_invoke_method @ 00ab618a:0x1084ab
Module._mono_wasm_invoke_method @ dotnet.5.0.0-rc.1.20451.14.js:1
call_method @ dotnet.5.0.0-rc.1.20451.14.js:1
(anonymous) @ dotnet.5.0.0-rc.1.20451.14.js:1
endInvokeJSFromDotNet @ blazor.webassembly.js:1
(anonymous) @ blazor.webassembly.js:1
Promise.then (async)
beginInvokeJSFromDotNet @ blazor.webassembly.js:1
w @ blazor.webassembly.js:1
_mono_wasm_invoke_js_blazor @ dotnet.5.0.0-rc.1.20451.14.js:1
do_icall @ 00ab618a:0x1944fd
do_icall_wrapper @ 00ab618a:0x79894
interp_exec_method @ 00ab618a:0x4442c
interp_runtime_invoke @ 00ab618a:0x12e8ab
mono_jit_runtime_invoke @ 00ab618a:0x118342
do_runtime_invoke @ 00ab618a:0x797dd
mono_runtime_invoke_checked @ 00ab618a:0xfee2
mono_runtime_try_invoke_array @ 00ab618a:0x10dd31
ves_icall_InternalInvoke @ 00ab618a:0xecc38
ves_icall_InternalInvoke_raw @ 00ab618a:0xec6fe
do_icall @ 00ab618a:0x19448a
do_icall_wrapper @ 00ab618a:0x79894
interp_exec_method @ 00ab618a:0x4442c
interp_runtime_invoke @ 00ab618a:0x12e8ab
mono_jit_runtime_invoke @ 00ab618a:0x118342
do_runtime_invoke @ 00ab618a:0x797dd
mono_runtime_try_invoke @ 00ab618a:0x13aa6
mono_runtime_invoke @ 00ab618a:0x10e12a
mono_wasm_invoke_method @ 00ab618a:0x1084ab
Module._mono_wasm_invoke_method @ dotnet.5.0.0-rc.1.20451.14.js:1
call_method @ dotnet.5.0.0-rc.1.20451.14.js:1
(anonymous) @ dotnet.5.0.0-rc.1.20451.14.js:1
beginInvokeDotNetFromJS @ blazor.webassembly.js:1
h @ blazor.webassembly.js:1
e.invokeMethodAsync @ blazor.webassembly.js:1
(anonymous) @ blazor.webassembly.js:1
invokeWhenHeapUnlocked @ blazor.webassembly.js:1
(anonymous) @ blazor.webassembly.js:1
t.dispatchEvent @ blazor.webassembly.js:1
(anonymous) @ blazor.webassembly.js:1
(anonymous) @ blazor.webassembly.js:1
e.onGlobalEvent @ blazor.webassembly.js:1
Show 35 more frames
blazor.webassembly.js:1 Unhandled Exception:
f.printErr @ blazor.webassembly.js:1
put_char @ dotnet.5.0.0-rc.1.20451.14.js:1
write @ dotnet.5.0.0-rc.1.20451.14.js:1
write @ dotnet.5.0.0-rc.1.20451.14.js:1
doWritev @ dotnet.5.0.0-rc.1.20451.14.js:1
_fd_write @ dotnet.5.0.0-rc.1.20451.14.js:1
__stdio_write @ 00ab618a:0xd940d
__fwritex @ 00ab618a:0x7caa4
fwrite @ 00ab618a:0x6b55
fputs @ 00ab618a:0x59107
default_stderr_handler @ 00ab618a:0x197153
monoeg_g_printerr @ 00ab618a:0x19cbc
mono_print_unhandled_exception_internal @ 00ab618a:0x8d8b6
mono_unhandled_exception_checked @ 00ab618a:0x109fec
mono_unhandled_exception_internal @ 00ab618a:0x62483
mono_handle_exception_internal @ 00ab618a:0x93451
mono_handle_exception @ 00ab618a:0x93ba8
interp_throw @ 00ab618a:0x5edb
interp_exec_method @ 00ab618a:0x49161
interp_runtime_invoke @ 00ab618a:0x12e8ab
mono_jit_runtime_invoke @ 00ab618a:0x118342
do_runtime_invoke @ 00ab618a:0x797dd
mono_runtime_try_invoke @ 00ab618a:0x13aa6
mono_runtime_invoke @ 00ab618a:0x10e12a
mono_wasm_invoke_method @ 00ab618a:0x1084ab
Module._mono_wasm_invoke_method @ dotnet.5.0.0-rc.1.20451.14.js:1
call_method @ dotnet.5.0.0-rc.1.20451.14.js:1
(anonymous) @ dotnet.5.0.0-rc.1.20451.14.js:1
endInvokeJSFromDotNet @ blazor.webassembly.js:1
(anonymous) @ blazor.webassembly.js:1
Promise.then (async)
beginInvokeJSFromDotNet @ blazor.webassembly.js:1
w @ blazor.webassembly.js:1
_mono_wasm_invoke_js_blazor @ dotnet.5.0.0-rc.1.20451.14.js:1
do_icall @ 00ab618a:0x1944fd
do_icall_wrapper @ 00ab618a:0x79894
interp_exec_method @ 00ab618a:0x4442c
interp_runtime_invoke @ 00ab618a:0x12e8ab
mono_jit_runtime_invoke @ 00ab618a:0x118342
do_runtime_invoke @ 00ab618a:0x797dd
mono_runtime_invoke_checked @ 00ab618a:0xfee2
mono_runtime_try_invoke_array @ 00ab618a:0x10dd31
ves_icall_InternalInvoke @ 00ab618a:0xecc38
ves_icall_InternalInvoke_raw @ 00ab618a:0xec6fe
do_icall @ 00ab618a:0x19448a
do_icall_wrapper @ 00ab618a:0x79894
interp_exec_method @ 00ab618a:0x4442c
interp_runtime_invoke @ 00ab618a:0x12e8ab
mono_jit_runtime_invoke @ 00ab618a:0x118342
do_runtime_invoke @ 00ab618a:0x797dd
mono_runtime_try_invoke @ 00ab618a:0x13aa6
mono_runtime_invoke @ 00ab618a:0x10e12a
mono_wasm_invoke_method @ 00ab618a:0x1084ab
Module._mono_wasm_invoke_method @ dotnet.5.0.0-rc.1.20451.14.js:1
call_method @ dotnet.5.0.0-rc.1.20451.14.js:1
(anonymous) @ dotnet.5.0.0-rc.1.20451.14.js:1
beginInvokeDotNetFromJS @ blazor.webassembly.js:1
h @ blazor.webassembly.js:1
e.invokeMethodAsync @ blazor.webassembly.js:1
(anonymous) @ blazor.webassembly.js:1
invokeWhenHeapUnlocked @ blazor.webassembly.js:1
(anonymous) @ blazor.webassembly.js:1
t.dispatchEvent @ blazor.webassembly.js:1
(anonymous) @ blazor.webassembly.js:1
(anonymous) @ blazor.webassembly.js:1
e.onGlobalEvent @ blazor.webassembly.js:1
Show 35 more frames
blazor.webassembly.js:1 System.Text.Json.JsonException: Invalid JSON
f.printErr @ blazor.webassembly.js:1
put_char @ dotnet.5.0.0-rc.1.20451.14.js:1
write @ dotnet.5.0.0-rc.1.20451.14.js:1
write @ dotnet.5.0.0-rc.1.20451.14.js:1
doWritev @ dotnet.5.0.0-rc.1.20451.14.js:1
_fd_write @ dotnet.5.0.0-rc.1.20451.14.js:1
__stdio_write @ 00ab618a:0xd940d
__fwritex @ 00ab618a:0x7caa4
fwrite @ 00ab618a:0x6b55
fputs @ 00ab618a:0x59107
default_stderr_handler @ 00ab618a:0x197153
monoeg_g_printerr @ 00ab618a:0x19cbc
mono_print_unhandled_exception_internal @ 00ab618a:0x8d8b6
mono_unhandled_exception_checked @ 00ab618a:0x109fec
mono_unhandled_exception_internal @ 00ab618a:0x62483
mono_handle_exception_internal @ 00ab618a:0x93451
mono_handle_exception @ 00ab618a:0x93ba8
interp_throw @ 00ab618a:0x5edb
interp_exec_method @ 00ab618a:0x49161
interp_runtime_invoke @ 00ab618a:0x12e8ab
mono_jit_runtime_invoke @ 00ab618a:0x118342
do_runtime_invoke @ 00ab618a:0x797dd
mono_runtime_try_invoke @ 00ab618a:0x13aa6
mono_runtime_invoke @ 00ab618a:0x10e12a
mono_wasm_invoke_method @ 00ab618a:0x1084ab
Module._mono_wasm_invoke_method @ dotnet.5.0.0-rc.1.20451.14.js:1
call_method @ dotnet.5.0.0-rc.1.20451.14.js:1
(anonymous) @ dotnet.5.0.0-rc.1.20451.14.js:1
endInvokeJSFromDotNet @ blazor.webassembly.js:1
(anonymous) @ blazor.webassembly.js:1
Promise.then (async)
beginInvokeJSFromDotNet @ blazor.webassembly.js:1
w @ blazor.webassembly.js:1
_mono_wasm_invoke_js_blazor @ dotnet.5.0.0-rc.1.20451.14.js:1
do_icall @ 00ab618a:0x1944fd
do_icall_wrapper @ 00ab618a:0x79894
interp_exec_method @ 00ab618a:0x4442c
interp_runtime_invoke @ 00ab618a:0x12e8ab
mono_jit_runtime_invoke @ 00ab618a:0x118342
do_runtime_invoke @ 00ab618a:0x797dd
mono_runtime_invoke_checked @ 00ab618a:0xfee2
mono_runtime_try_invoke_array @ 00ab618a:0x10dd31
ves_icall_InternalInvoke @ 00ab618a:0xecc38
ves_icall_InternalInvoke_raw @ 00ab618a:0xec6fe
do_icall @ 00ab618a:0x19448a
do_icall_wrapper @ 00ab618a:0x79894
interp_exec_method @ 00ab618a:0x4442c
interp_runtime_invoke @ 00ab618a:0x12e8ab
mono_jit_runtime_invoke @ 00ab618a:0x118342
do_runtime_invoke @ 00ab618a:0x797dd
mono_runtime_try_invoke @ 00ab618a:0x13aa6
mono_runtime_invoke @ 00ab618a:0x10e12a
mono_wasm_invoke_method @ 00ab618a:0x1084ab
Module._mono_wasm_invoke_method @ dotnet.5.0.0-rc.1.20451.14.js:1
call_method @ dotnet.5.0.0-rc.1.20451.14.js:1
(anonymous) @ dotnet.5.0.0-rc.1.20451.14.js:1
beginInvokeDotNetFromJS @ blazor.webassembly.js:1
h @ blazor.webassembly.js:1
e.invokeMethodAsync @ blazor.webassembly.js:1
(anonymous) @ blazor.webassembly.js:1
invokeWhenHeapUnlocked @ blazor.webassembly.js:1
(anonymous) @ blazor.webassembly.js:1
t.dispatchEvent @ blazor.webassembly.js:1
(anonymous) @ blazor.webassembly.js:1
(anonymous) @ blazor.webassembly.js:1
e.onGlobalEvent @ blazor.webassembly.js:1
Show 35 more frames
blazor.webassembly.js:1    at Microsoft.JSInterop.Infrastructure.DotNetDispatcher.EndInvokeJS(JSRuntime jsRuntime, String arguments)
f.printErr @ blazor.webassembly.js:1
put_char @ dotnet.5.0.0-rc.1.20451.14.js:1
write @ dotnet.5.0.0-rc.1.20451.14.js:1
write @ dotnet.5.0.0-rc.1.20451.14.js:1
doWritev @ dotnet.5.0.0-rc.1.20451.14.js:1
_fd_write @ dotnet.5.0.0-rc.1.20451.14.js:1
__stdio_write @ 00ab618a:0xd940d
__fwritex @ 00ab618a:0x7caa4
fwrite @ 00ab618a:0x6b55
fputs @ 00ab618a:0x59107
default_stderr_handler @ 00ab618a:0x197153
monoeg_g_printerr @ 00ab618a:0x19cbc
mono_print_unhandled_exception_internal @ 00ab618a:0x8d8b6
mono_unhandled_exception_checked @ 00ab618a:0x109fec
mono_unhandled_exception_internal @ 00ab618a:0x62483
mono_handle_exception_internal @ 00ab618a:0x93451
mono_handle_exception @ 00ab618a:0x93ba8
interp_throw @ 00ab618a:0x5edb
interp_exec_method @ 00ab618a:0x49161
interp_runtime_invoke @ 00ab618a:0x12e8ab
mono_jit_runtime_invoke @ 00ab618a:0x118342
do_runtime_invoke @ 00ab618a:0x797dd
mono_runtime_try_invoke @ 00ab618a:0x13aa6
mono_runtime_invoke @ 00ab618a:0x10e12a
mono_wasm_invoke_method @ 00ab618a:0x1084ab
Module._mono_wasm_invoke_method @ dotnet.5.0.0-rc.1.20451.14.js:1
call_method @ dotnet.5.0.0-rc.1.20451.14.js:1
(anonymous) @ dotnet.5.0.0-rc.1.20451.14.js:1
endInvokeJSFromDotNet @ blazor.webassembly.js:1
(anonymous) @ blazor.webassembly.js:1
Promise.then (async)
beginInvokeJSFromDotNet @ blazor.webassembly.js:1
w @ blazor.webassembly.js:1
_mono_wasm_invoke_js_blazor @ dotnet.5.0.0-rc.1.20451.14.js:1
do_icall @ 00ab618a:0x1944fd
do_icall_wrapper @ 00ab618a:0x79894
interp_exec_method @ 00ab618a:0x4442c
interp_runtime_invoke @ 00ab618a:0x12e8ab
mono_jit_runtime_invoke @ 00ab618a:0x118342
do_runtime_invoke @ 00ab618a:0x797dd
mono_runtime_invoke_checked @ 00ab618a:0xfee2
mono_runtime_try_invoke_array @ 00ab618a:0x10dd31
ves_icall_InternalInvoke @ 00ab618a:0xecc38
ves_icall_InternalInvoke_raw @ 00ab618a:0xec6fe
do_icall @ 00ab618a:0x19448a
do_icall_wrapper @ 00ab618a:0x79894
interp_exec_method @ 00ab618a:0x4442c
interp_runtime_invoke @ 00ab618a:0x12e8ab
mono_jit_runtime_invoke @ 00ab618a:0x118342
do_runtime_invoke @ 00ab618a:0x797dd
mono_runtime_try_invoke @ 00ab618a:0x13aa6
mono_runtime_invoke @ 00ab618a:0x10e12a
mono_wasm_invoke_method @ 00ab618a:0x1084ab
Module._mono_wasm_invoke_method @ dotnet.5.0.0-rc.1.20451.14.js:1
call_method @ dotnet.5.0.0-rc.1.20451.14.js:1
(anonymous) @ dotnet.5.0.0-rc.1.20451.14.js:1
beginInvokeDotNetFromJS @ blazor.webassembly.js:1
h @ blazor.webassembly.js:1
e.invokeMethodAsync @ blazor.webassembly.js:1
(anonymous) @ blazor.webassembly.js:1
invokeWhenHeapUnlocked @ blazor.webassembly.js:1
(anonymous) @ blazor.webassembly.js:1
t.dispatchEvent @ blazor.webassembly.js:1
(anonymous) @ blazor.webassembly.js:1
(anonymous) @ blazor.webassembly.js:1
e.onGlobalEvent @ blazor.webassembly.js:1
Show 35 more frames
blazor.webassembly.js:1    at Microsoft.AspNetCore.Components.WebAssembly.Services.DefaultWebAssemblyJSRuntime.EndInvokeJS(String argsJson)
f.printErr @ blazor.webassembly.js:1
put_char @ dotnet.5.0.0-rc.1.20451.14.js:1
write @ dotnet.5.0.0-rc.1.20451.14.js:1
write @ dotnet.5.0.0-rc.1.20451.14.js:1
doWritev @ dotnet.5.0.0-rc.1.20451.14.js:1
_fd_write @ dotnet.5.0.0-rc.1.20451.14.js:1
__stdio_write @ 00ab618a:0xd940d
__fwritex @ 00ab618a:0x7caa4
fwrite @ 00ab618a:0x6b55
fputs @ 00ab618a:0x59107
default_stderr_handler @ 00ab618a:0x197153
monoeg_g_printerr @ 00ab618a:0x19cbc
mono_print_unhandled_exception_internal @ 00ab618a:0x8d8b6
mono_unhandled_exception_checked @ 00ab618a:0x109fec
mono_unhandled_exception_internal @ 00ab618a:0x62483
mono_handle_exception_internal @ 00ab618a:0x93451
mono_handle_exception @ 00ab618a:0x93ba8
interp_throw @ 00ab618a:0x5edb
interp_exec_method @ 00ab618a:0x49161
interp_runtime_invoke @ 00ab618a:0x12e8ab
mono_jit_runtime_invoke @ 00ab618a:0x118342
do_runtime_invoke @ 00ab618a:0x797dd
mono_runtime_try_invoke @ 00ab618a:0x13aa6
mono_runtime_invoke @ 00ab618a:0x10e12a
mono_wasm_invoke_method @ 00ab618a:0x1084ab
Module._mono_wasm_invoke_method @ dotnet.5.0.0-rc.1.20451.14.js:1
call_method @ dotnet.5.0.0-rc.1.20451.14.js:1
(anonymous) @ dotnet.5.0.0-rc.1.20451.14.js:1
endInvokeJSFromDotNet @ blazor.webassembly.js:1
(anonymous) @ blazor.webassembly.js:1
Promise.then (async)
beginInvokeJSFromDotNet @ blazor.webassembly.js:1
w @ blazor.webassembly.js:1
_mono_wasm_invoke_js_blazor @ dotnet.5.0.0-rc.1.20451.14.js:1
do_icall @ 00ab618a:0x1944fd
do_icall_wrapper @ 00ab618a:0x79894
interp_exec_method @ 00ab618a:0x4442c
interp_runtime_invoke @ 00ab618a:0x12e8ab
mono_jit_runtime_invoke @ 00ab618a:0x118342
do_runtime_invoke @ 00ab618a:0x797dd
mono_runtime_invoke_checked @ 00ab618a:0xfee2
mono_runtime_try_invoke_array @ 00ab618a:0x10dd31
ves_icall_InternalInvoke @ 00ab618a:0xecc38
ves_icall_InternalInvoke_raw @ 00ab618a:0xec6fe
do_icall @ 00ab618a:0x19448a
do_icall_wrapper @ 00ab618a:0x79894
interp_exec_method @ 00ab618a:0x4442c
interp_runtime_invoke @ 00ab618a:0x12e8ab
mono_jit_runtime_invoke @ 00ab618a:0x118342
do_runtime_invoke @ 00ab618a:0x797dd
mono_runtime_try_invoke @ 00ab618a:0x13aa6
mono_runtime_invoke @ 00ab618a:0x10e12a
mono_wasm_invoke_method @ 00ab618a:0x1084ab
Module._mono_wasm_invoke_method @ dotnet.5.0.0-rc.1.20451.14.js:1
call_method @ dotnet.5.0.0-rc.1.20451.14.js:1
(anonymous) @ dotnet.5.0.0-rc.1.20451.14.js:1
beginInvokeDotNetFromJS @ blazor.webassembly.js:1
h @ blazor.webassembly.js:1
e.invokeMethodAsync @ blazor.webassembly.js:1
(anonymous) @ blazor.webassembly.js:1
invokeWhenHeapUnlocked @ blazor.webassembly.js:1
(anonymous) @ blazor.webassembly.js:1
t.dispatchEvent @ blazor.webassembly.js:1
(anonymous) @ blazor.webassembly.js:1
(anonymous) @ blazor.webassembly.js:1
e.onGlobalEvent @ blazor.webassembly.js:1
Show 35 more frames
dotnet.5.0.0-rc.1.20451.14.js:1 Uncaught (in promise) Error: System.Text.Json.JsonException: Invalid JSON
   at Microsoft.JSInterop.Infrastructure.DotNetDispatcher.EndInvokeJS(JSRuntime jsRuntime, String arguments)
   at Microsoft.AspNetCore.Components.WebAssembly.Services.DefaultWebAssemblyJSRuntime.EndInvokeJS(String argsJson)
    at Object.call_method (dotnet.5.0.0-rc.1.20451.14.js:1)
    at dotnet.5.0.0-rc.1.20451.14.js:1
    at Object.endInvokeJSFromDotNet (blazor.webassembly.js:1)
    at blazor.webassembly.js:1

@majorimi majorimi changed the title Blazor JS interop issue with ElementReference return type. Blazor JS interop issue with HTML element return type. Oct 1, 2020
@majorimi majorimi changed the title Blazor JS interop issue with HTML element return type. .NET5 RC1 Blazor JS interop issue with HTML element return type. Oct 1, 2020
@pranavkm pranavkm added the area-blazor Includes: Blazor, Razor Components label Oct 1, 2020
@pranavkm
Copy link
Contributor

pranavkm commented Oct 5, 2020 •
edited
Loading

An ElementReference specifically refers to an element rendered by Blazor. You could read arbitrary DOM elements as IJSObjectReference and use it:

var _focusJs = await _jsRuntime.InvokeAsync<IJSObjectReference>("import", "./_content/<PACKAGE>/focus.js");
var _previousFocusedElement = await _focusJs.InvokeAsync<IJSObjectReference>("getFocusedElement");

@pranavkm pranavkm added the ✔️ Resolution: Answered Resolved because the question asked by the original author has been answered. label Oct 5, 2020
@ghost ghost added the Status: Resolved label Oct 5, 2020
@majorimi
Copy link
Author

majorimi commented Oct 5, 2020

Hmm great answer thanks it worked! 👍

However I have one last question. ElementReference represents an HTML element which is not IDisposable. But what you are suggesting IJSObjectReference also can reference the same HTML element which is IAsyncDisposable.
So all of these elements should be now disposed?

@pranavkm
Copy link
Contributor

pranavkm commented Oct 5, 2020

Blazor has to keep track of state for each IJSObjectReference it tracks, consequently it needs to be disposed. ElementReference does not require any specific state tracking.

@majorimi
Copy link
Author

majorimi commented Oct 5, 2020

Ok I'm calling dispose. And the good news the code works... Thanks

@majorimi majorimi closed this as completed Oct 5, 2020
@ghost ghost locked as resolved and limited conversation to collaborators Nov 4, 2020
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
area-blazor Includes: Blazor, Razor Components ✔️ Resolution: Answered Resolved because the question asked by the original author has been answered. Status: Resolved
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@pranavkm @majorimi