fix: Cannot set properties of null (setting '_blazorInputFileNextFileId') when FluentInputFile is used in EditForm

[abdulqadir89]

🐛 Bug Report

Error Cannot set properties of null (setting '_blazorInputFileNextFileId') occurs when FluentInputFile is being used in EditForm and navigation is changed either by clicking or programmatically and no file is selected .

FluentInputFile works fine if it is used outside form.

💻 Repro or Code Sample

@rendermode InteractiveServer

<EditForm EditContext="@editContext" OnValidSubmit="@Submit" FormName="Comment">
    <AntiforgeryToken />
    <DataAnnotationsValidator />
    <ValidationSummary />

    <FluentInputFile @ref="@inputFile"
                     Id="file-uploader"
                     DragDropZoneVisible=true
                     Mode="InputFileMode.Stream"
                     Multiple="true"
                     Accept="image/*,.pdf,.doc,.docx,.xml,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document, .xls, .xlsx"
                     OnFileUploaded="@OnFileUploadedAsync"
                     OnCompleted="@OnCompleted" Style="width:100%;height: 100px; border: 1px dashed var(--accent-fill-rest);" Disabled=@Disabled>
        <ChildContent>
            <div>
                Drag files here you wish to upload, or <label for="file-uploader">browse</label> for them.<br />
            </div>
        </ChildContent>
    </FluentInputFile>

</EditForm>

🤔 Expected Behavior

FluentInputFile should work in EditForm.

😯 Current Behavior

Websocket disconnects due to unhandled error and user has to reload the page.

Microsoft.AspNetCore.Components.Server.Circuits.CircuitHost[111] Unhandled exception in circuit '"IFiKl3Q20LQgmrSmMDwRp7WRULlP7qnMt6hFuYttE7s"'. Microsoft.JSInterop.JSException: Cannot set properties of null (setting '_blazorInputFileNextFileId') TypeError: Cannot set properties of null (setting '_blazorInputFileNextFileId') at Object.init (https://localhost:7165/_framework/blazor.web.js:1:37370) at https://localhost:7165/_framework/blazor.web.js:1:3047 at new Promise () at y.beginInvokeJSFromDotNet (https://localhost:7165/_framework/blazor.web.js:1:3004) at gn._invokeClientMethod (https://localhost:7165/_framework/blazor.web.js:1:62730) at gn._processIncomingData (https://localhost:7165/_framework/blazor.web.js:1:60119) at connection.onreceive (https://localhost:7165/_framework/blazor.web.js:1:53760) at i.onmessage (https://localhost:7165/_framework/blazor.web.js:1:81866) at Microsoft.JSInterop.JSRuntime.InvokeAsync[TValue](Int64 targetInstanceId, String identifier, Object[] args) at Microsoft.JSInterop.JSRuntimeExtensions.InvokeVoidAsync(IJSRuntime jsRuntime, String identifier, Object[] args) at Microsoft.AspNetCore.Components.Forms.InputFile.OnAfterRenderAsync(Boolean firstRender) at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle, ComponentState owningComponentState)

🌍 Your Environment

• Browser [Microsoft Edge & Google Chrome]
• .NET 8.0.8 and Fluent UI Blazor library 4.9.3

[vnbaaij]

Reproduction code is not complete!! Also, please elaborate on 'navigation is changed either by clicking or programmatically'. Navigate to another page?

Please supply us with ready-to-run reproduction code in the form of something we can copy/paste, a (zipped) project structure or a GitHub repository.

We do not have capacity to craft or compose a reproduction for every issue that gets raised.

If no code or repository is provided, this issue will be closed in 3 days

Help us to help you. Thanks.

[abdulqadir89]

I am unable to reproduce the code because it is happening randomly in the application.

As a quick fix, I have placed the FluentInputFile component outside EditForm and anchored it with button. It is working and no error reported yet.

Also, please elaborate on 'navigation is changed either by clicking or programmatically'. Navigate to another page?

Yes

[vnbaaij]

Ok, as it is not reliably reproducible and you have a work around, I'm closing this one.

Please feel free to re-open if you're blue to reproduce reliably and can share code with us.