Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: OnCompleted stops dialogues working in FluentInputFile #3355

Open
ApacheTech opened this issue Feb 13, 2025 · 0 comments
Open

fix: OnCompleted stops dialogues working in FluentInputFile #3355

ApacheTech opened this issue Feb 13, 2025 · 0 comments
Assignees
Labels
status:needs-investigation Needs additional investigation

Comments

@ApacheTech
Copy link
Contributor

ApacheTech commented Feb 13, 2025

🐛 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
@microsoft-github-policy-service microsoft-github-policy-service bot added the triage New issue. Needs to be looked at label Feb 13, 2025
@vnbaaij vnbaaij added status:needs-investigation Needs additional investigation and removed triage New issue. Needs to be looked at labels Feb 13, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
status:needs-investigation Needs additional investigation
Projects
None yet
Development

No branches or pull requests

3 participants