fix: OnCompleted stops dialogues working in FluentInputFile

[ApacheTech]

🐛 Bug Report

If you try to use dialogues within the OnCompleted task of a FluentInputFile component, the buttons within the dialogue do not respond.

💻 Repro or Code Sample

This assumes that <FluentDialogProvider /> is added within MainLayout.razor or App.razor.

@page "/sandbox"

<h3>
    @_message
</h3>

<FluentStack HorizontalGap="4">
    <FluentButton OnClick="ShowConfirmationAsync" Appearance="Appearance.Accent">
        Show Confirmation Directly
    </FluentButton>
    <FluentButton Id="btnUpload" Appearance="Appearance.Accent">
        Upload Then Confirm
    </FluentButton>
</FluentStack>

<FluentInputFile Class="h-fit w-full"
                 Multiple="false"
                 AnchorId="btnUpload"
                 Mode="InputFileMode.Stream"
                 MaximumFileSize="@(1024 * 1024 * 1024)"
                 DragDropZoneVisible="false"
                 OnCompleted="OnFileUploadedAsync" />

@code {
    private string _message = "Ready.";

    [Inject]
    private IDialogService Dialogue { get; init; }

    private async Task OnFileUploadedAsync(IEnumerable<FluentInputFileEventArgs> args)
    {
        await ShowConfirmationAsync();
    }

    private async Task ShowConfirmationAsync()
    {
        var dialogue = await Dialogue.ShowConfirmationAsync("Do you want to continue?");
        var result = await dialogue.Result;
        _message = result.Cancelled
            ? "Cancelled"
            : "Accepted";
    }
}

🤔 Expected Behavior

Whether the confirmation dialogue is shown via OnClick from FluentButton, or OnComplete from FluentInputFile, both should allow the dialogue to be responsive.

😯 Current Behavior

The above code sample shows that the buttons within the dialogue are unresponsive, if called via the OnCompleted task.

💁 Possible Solution

Could the OnCompleted task be detached from the page dispatcher, requiring an InvokeAsync wrapper to reattach it?

🔦 Context

One of our services is Partially Automated Workflows, where the user uploads a file, and needs to confirm that they wish to continue if there are any chargable items within the workflow. This issue stops that process from working.

🌍 Your Environment

• OS & Device: Windows 11 Enterprise
• Browser: Tested on Firefox, Edge, Opera, Chrome, and Maxathon
• Framework Version: net8.0
• Blazor App: Global InteractiveServer
• Fluent UI Blazor library Version: 4.11.4

[rpodevns]

The issue is not related to FluentDialog. Instead, it is caused by how InputFileMode.Stream handles the upload. Files are processed in two large synchronous steps without yielding control to the UI thread.

Buffer and SaveToTemporaryFolder modes work fine because they process files incrementally in smaller asynchronous chunks, yielding control to the UI thread.

Should I submit a PR?

[ApacheTech]

Yes please. It's causing a lot of issues.

[rpodevns]

@dvoituron @vnbaaij Should I create the PR or paste the updated code here? Just not sure of the approval process for PRs.

[vnbaaij]

Create a PR please. Reference this issue with 'Fix #3355' in the description (not in the title). Denis or I will then take a look and if everything checks out, we'll merge it in.

[rpodevns]

@vnbaaij Thanks. I wasn’t sure when to proceed with the PR. I wanted to confirm since what I see as an issue might not always be one.

The fix is a substantial change in how streamed uploads are done. Should there be an opt-in parameter and what should it be named?

[vnbaaij]

Is there any change needed to the code a developer uses? If so, yes then we need to make it opt-in. If not, then we can change whatever we want.

[ApacheTech]

Even if it doesn't change the public API layer, it will yield back to the dispatcher, causing different side-effects than it currently does. Everyone is currently using it synchronously, and so to yield back control will be a significant change to how it is used, even if it is supposed to fix the problems. Could it be a new mode? `AsychronousStream` That way, no current code is touched, and people can opt-in by choosing the new upload mode. Then, there's no options to set, and you don't need to worry about individual overrides, or other side-effects. Sent from Outlook for Android<https://aka.ms/AAb9ysg>

…

________________________________ From: Vincent Baaij ***@***.***> Sent: Sunday, February 23, 2025 5:37:04 PM To: microsoft/fluentui-blazor ***@***.***> Cc: Peter Matthews ***@***.***>; Author ***@***.***> Subject: Re: [microsoft/fluentui-blazor] fix: OnCompleted stops dialogues working in FluentInputFile (Issue #3355) Is there any change needed to the code a developer uses? If so, yes then we need to make it opt-in. If not, then we can change whatever we want. — Reply to this email directly, view it on GitHub<#3355 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/ABKXDFYNALFPFGGEY2TAWOT2RIBMBAVCNFSM6AAAAABXCPJOFCVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDMNZXGAYDEMRYGM>. You are receiving this because you authored the thread.Message ID: ***@***.***> [vnbaaij]vnbaaij left a comment (microsoft/fluentui-blazor#3355)<#3355 (comment)> Is there any change needed to the code a developer uses? If so, yes then we need to make it opt-in. If not, then we can change whatever we want. — Reply to this email directly, view it on GitHub<#3355 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/ABKXDFYNALFPFGGEY2TAWOT2RIBMBAVCNFSM6AAAAABXCPJOFCVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDMNZXGAYDEMRYGM>. You are receiving this because you authored the thread.Message ID: ***@***.***>

[vnbaaij]

I'm ok with creating a new mode or opt-in.

[rpodevns]

@ApacheTech I'm re-thinking how I've approached this. In the meantime, have a look at: #2592

[ApacheTech]

@rpodevns, it's been over three weeks now since there's been any update for this. Will a fix be coming any time soon? Please reply, even just to say no.

[ApacheTech]

@rpodevns Can I please have an update? Are you still working on this?