I have a Blazor server side project and I am trying to interop with js. Everything works as expected except this strange (for me) behavior
Inside a js module I have registered an ondrop event and I am assigning the dataTransfer items from the event to a const;
After awaiting the dotnet method the const items is kind of "resetting".
dropzone.addEventListener("drop", dropHandler, false);
const dropHandler = async (event) => {
event.preventDefault();
const items = event.dataTransfer.items;
console.log(items);
// outputs: DataTransferItemList {0: DataTransferItem, length: 1}
dotnetRefObject.InvokeMethodAsync("FireAndForget");
console.log(items);
// outputs: DataTransferItemList {0: DataTransferItem, length: 1}
const result = await dotnetRefObject.invokeMethodAsync('MethodWithReturn');
console.log(result);
//ouputs: true
console.log(items);
//ouputs: DataTransferItemList {length: 0}
}
[JSInvokable]
public async Task<bool> MethodWithReturn()
{
await Task.Delay(1);
return true;
}
const itemsjust takes a reference to the datatransfer items and store the reference as a constant. The underlyingitemsbeing referenced can still change. In addition I don't think events are natively async, so this is going to fire and forget in JS as well - and so I believe the dataTransfer is probably cleared down while you await the .NET method. If you clone the datatransfer items instead that should solve the problem I would hope