Blazor file input click not working in firefox

[fabianschurz]

Describe the bug

Trigger a click event via Javascript on an input element of type file is not working.
When searching the web for my problem i found this stackoverflow thread.

To Reproduce

Create an input file element in a razor component. Then create a button on the component. On the button click call a void, inside the void method call the IJsRuntime invoke method to trigger your js function that clicks the input file element by id.

In Firefox this is not working while in Edge f.ex. it does.

Example from stackoverflow:

@inject IJSRuntime JSRuntime;
@*File Input is clicked using JSinterop on blazor click event of button*@
<div>
    <button @onclick="OnClick">Select File</button>
    <input type="file" id="fileElem" multiple style="display:none">
</div>


@code{
    private async Task OnClick()
    {
        //Triggers the click event of file Input
        await JSRuntime.InvokeVoidAsync("elementClick", "fileElem");
    }
}

window.elementClick = (Id) => {
   // Triggers click event of the element
    document.getElementById(Id).click();
};

Further technical details

• ASP.NET Core version
• Include the output of dotnet --info
• The IDE (VS / VS Code/ VS4Mac) you're running on, and it's version

IDE: VS

netcoreapp3.1

dotnet --info:
.NET Core SDK:
Version: 3.1.101
Commit: b377529961

Laufzeitumgebung:
OS Name: Windows
OS Version: 10.0.18362
OS Platform: Windows
RID: win10-x64
Base Path: C:\Program Files\dotnet\sdk\3.1.101\

Host (useful for support):
Version: 3.1.2
Commit: 916b5cba26

.NET Core SDKs installed:
2.2.207 [C:\Program Files\dotnet\sdk]
3.1.101 [C:\Program Files\dotnet\sdk]

.NET Core runtimes installed:
Microsoft.AspNetCore.All 2.1.15 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.All]
Microsoft.AspNetCore.All 2.2.8 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.All]
Microsoft.AspNetCore.App 2.1.15 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
Microsoft.AspNetCore.App 2.2.8 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
Microsoft.AspNetCore.App 3.1.1 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
Microsoft.NETCore.App 2.1.15 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
Microsoft.NETCore.App 2.2.8 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
Microsoft.NETCore.App 3.1.1 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
Microsoft.NETCore.App 3.1.2 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
Microsoft.WindowsDesktop.App 3.1.1 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App]

[javiercn]

@xFirestorm thanks for contacting us.

A few questions:

• Are you able to pause the debugger inside elementClick?
• Can you reproduce this issue in plain HTML?

[laroygreen]

I am experiencing a similar issue with Firefox 74.0 (64-bit) but not in Chrome 80.0.3987.149 (64-bit). Additionally, I get this error with Firefox that I do not get with Chrome "Error: Found malformed component comment at Blazor". I am able to pause the debugger inside Chrome but not in Firefox. Additionally, Firefox does not show any event listeners when inspecting while Chrome does.

Environment
IDE: Rider (Windows)

.NET Core SDK (reflecting any global.json):
Version: 3.1.200
Commit: c5123d973b

Runtime Environment:
OS Name: Windows
OS Version: 10.0.18362
OS Platform: Windows
RID: win10-x64
Base Path: C:\Program Files\dotnet\sdk\3.1.200\

Host (useful for support):
Version: 3.1.2
Commit: 916b5cba26

Full Firefox Error:
Error: Found malformed component comment at Blazor:{"sequence":0,"type":"server","prerenderId":"73f0f9fefa2e47c7aff195b9429b7470","descriptor":"CfDJ8EQzDAHRBYNBkNu4uc2TVM5xSez7tz3EbBI3gDXuwGMh24YPtzdJkCa9cgPQ/oeCFYsbP60tTC5FavSDcl5/6sC/lDEbZnQwBC2rcN694WF\u002BnEv2yjI0vndTrcO2M/xJnuhk7FyCLim0FS4C6gI8ca/yAJCNIf/nqE0e7irEve1zTWix7EmvzrmjernKY57NB\u002BKBSiSplqDJGK4rzRHP5o9/\u002BUnEfjuOS5IQC6PoVn0V\u002BiYiSXFZZRdSE\u002BY8utih4nw7qQQ3sP8VN0iplnyWV\u002B1EpyZacIHcOm06rMXJCWoUizEwlSpe6lj7gSzpA3EpQzL4aLhC2/SWqTPsxfB5qsBIYd0zC/Iv9ZWyUMxbdaMS"}

[javiercn]

I just gave this a quick try on Firefox.

I'm not able to see any error in the browser console as you are reporting, but I suspect it is unrelated.

I can't get the select file dialog to show, but I believe that is a firefox specific issue and not a Blazor issue since I am able to hit the JavaScript handler without problems.

I suggest you find an alternative approach to do this, since it is likely firefox might be preventing you to do this for security reasons (it is suspicious to trigger a menu from a hidden element, but this is just my speculation)

[fabianschurz]

I just gave this a quick try on Firefox.

I'm not able to see any error in the browser console as you are reporting, but I suspect it is unrelated.

I can't get the select file dialog to show, but I believe that is a firefox specific issue and not a Blazor issue since I am able to hit the JavaScript handler without problems.

I suggest you find an alternative approach to do this, since it is likely firefox might be preventing you to do this for security reasons (it is suspicious to trigger a menu from a hidden element, but this is just my speculation)

It's not a firefox security feature. Plain html is working. See here: https://jsfiddle.net/chxnbmqt/

There are many other way's to achieve custom styling of a file input element (already implemented another way). Still i think this may be a bug related to blazor, correct me if wrong.

[fabianschurz]

@xFirestorm thanks for contacting us.

A few questions:

* Are you able to pause the debugger inside `elementClick`?

* Can you reproduce this issue in plain HTML?

I cannot reproduce the issue in plain HTML.

I am hitting the debugger debugger inside elementClick

[fabianschurz]

@javiercn Maybe we should reopen this issue for some deeper investigation