diff --git a/src/Components/test/E2ETest/Tests/InteropTest.cs b/src/Components/test/E2ETest/Tests/InteropTest.cs index 07d54f0fa3d8..9293fdda9b9c 100644 --- a/src/Components/test/E2ETest/Tests/InteropTest.cs +++ b/src/Components/test/E2ETest/Tests/InteropTest.cs @@ -78,6 +78,7 @@ public void CanInvokeInteropMethods() ["testDtoAsync"] = "Same", ["returnPrimitiveAsync"] = "123", ["returnArrayAsync"] = "first,second", + ["elementReference"] = "Success", ["jsObjectReference.identity"] = "Invoked from JSObjectReference", ["jsObjectReference.nested.add"] = "5", ["addViaJSObjectReference"] = "5", diff --git a/src/Components/test/testassets/BasicTestApp/InteropComponent.razor b/src/Components/test/testassets/BasicTestApp/InteropComponent.razor index 3cafad7b577b..aa57fdc10db9 100644 --- a/src/Components/test/testassets/BasicTestApp/InteropComponent.razor +++ b/src/Components/test/testassets/BasicTestApp/InteropComponent.razor @@ -51,6 +51,9 @@

@nameof(JSObjectReferenceInvokeNonFunctionException)

@JSObjectReferenceInvokeNonFunctionException?.Message

+ +

Element reference.

+ @if (DoneWithInterop) {

Done with interop.

@@ -70,6 +73,8 @@ public bool DoneWithInterop { get; set; } + public ElementReference element; + public async Task InvokeInteropAsync() { var shouldSupportSyncInterop = RuntimeInformation.IsOSPlatform(OSPlatform.Create("BROWSER")); @@ -167,6 +172,15 @@ ReturnValues["invokeAsyncThrowsSerializingCircularStructure"] = $"Failure: {ex.Message}"; } + try + { + var elementReference = await JSRuntime.InvokeAsync("returnElementReference", element); + ReturnValues["elementReference"] = "Success"; + } + catch (Exception ex) + { + ReturnValues["elementReference"] = $"Failure: {ex.Message}"; + } var jsObjectReference = await JSRuntime.InvokeAsync("returnJSObjectReference"); ReturnValues["jsObjectReference.identity"] = await jsObjectReference.InvokeAsync("identity", "Invoked from JSObjectReference"); diff --git a/src/Components/test/testassets/BasicTestApp/wwwroot/js/jsinteroptests.js b/src/Components/test/testassets/BasicTestApp/wwwroot/js/jsinteroptests.js index 3faee4235ecb..de82a2beb758 100644 --- a/src/Components/test/testassets/BasicTestApp/wwwroot/js/jsinteroptests.js +++ b/src/Components/test/testassets/BasicTestApp/wwwroot/js/jsinteroptests.js @@ -254,6 +254,7 @@ window.jsInteropTests = { receiveDotNetObjectByRefAsync: receiveDotNetObjectByRefAsync, receiveDotNetStreamReference: receiveDotNetStreamReference, receiveDotNetStreamWrapperReference: receiveDotNetStreamWrapperReference, + returnElementReference: returnElementReference, TestClass: TestClass, nonConstructorFunction: () => { return 42; }, testObject: testObject, @@ -373,6 +374,10 @@ function returnJSObjectReference() { }; } +function returnElementReference(element) { + return element; +} + function addViaJSObjectReference(jsObjectReference, a, b) { return jsObjectReference.nested.add(a, b); } diff --git a/src/JSInterop/Microsoft.JSInterop.JS/src/src/Microsoft.JSInterop.ts b/src/JSInterop/Microsoft.JSInterop.JS/src/src/Microsoft.JSInterop.ts index 8c0a3d9c6999..f6ad200105a1 100644 --- a/src/JSInterop/Microsoft.JSInterop.JS/src/src/Microsoft.JSInterop.ts +++ b/src/JSInterop/Microsoft.JSInterop.JS/src/src/Microsoft.JSInterop.ts @@ -9,6 +9,7 @@ export module DotNet { const jsObjectIdKey = "__jsObjectId"; const dotNetObjectRefKey = "__dotNetObject"; + const dotNetElementRefKey = "__internalId"; const byteArrayRefKey = "__byte[]"; const dotNetStreamRefKey = "__dotNetStream"; const jsStreamReferenceLengthKey = "__jsStreamReferenceLength"; @@ -807,7 +808,20 @@ export module DotNet { return result; } + function getCaptureIdFromElement(element: Element): string | null { + for (let i = 0; i < element.attributes.length; i++) { + const attr = element.attributes[i]; + if (attr.name.startsWith('_bl_')) { + return attr.name.substring(4); + } + } + return null; +} + function argReplacer(key: string, value: any) { + if (value instanceof Element) { + return { [dotNetElementRefKey]: getCaptureIdFromElement(value) }; + } if (value instanceof DotNetObject) { return value.serializeAsArg(); } else if (value instanceof Uint8Array) {