Dialog does not close

Question

If the confirmed value is true then event handler for OnConfirm in parent component is called successfully. But dialog does not close itself. But when confirm value is false no event handler is called and dialog closes. Please have look at he following code snippet.

<SfDialog

Width="300px"

Height="400px"

AllowDragging="true"

IsModal="true"

ShowCloseIcon="true"

@bind-Visible="@IsVisible">

...

<DialogButton Content="Ok" IsPrimary="true" OnClick=@(() => ConfirmDialog(true)) />

<DialogButton Content="Cancel" OnClick=@(() => ConfirmDialog(false)) />

</DialogButtons>

</SfDialog>

@code {

[Parameter]

public EventCallback<PdiSeqChangeDTO> OnConfirm { get; set; }

[Parameter]

public PdiSeqChangeDTO? Model { get; set; } = new();

private SfDataForm? DataFormInstance { get; set; }

private async void ConfirmDialog(bool confirmed)

{

if (confirmed)

{

var valid = DataFormInstance?.IsValid();

if (valid.HasValue && valid.Value)

{

// If the next line is called (successfully) then dialog does not close

await OnConfirm.InvokeAsync(Model);

}

else

{

return;

}

this.IsVisible = false;

}

...

}

Priyanka Karthikeyan · Answer

Hi Erciyes,If you're encountering 404 errors related to Syncfusion _content resource files when using the Dialog component, it’s likely due to missing or incorrectly configured script references.To resolve this issue, make sure the appropriate Syncfusion script is referenced at the end of the tag in your ~/Components/App.razor file. If you're using standalone NuGet packages (e.g., Syncfusion.Blazor.Popups), include this script: If you're using the single Syncfusion.Blazor NuGet package, use this script instead: This script reference is essential for the proper functioning of the Dialog component. Without it, the browser will return 404 errors when trying to load required resources, which will prevent the SfDialog popup from working as expected.If you're still experiencing the issue after verifying the script reference, please share a sample project that reproduces the problem along with the steps to replicate it. This will help us assist you more effectively.Regards,Priyanka K

Erciyes · Answer

Please open the custom dialog component and confirm it. You will see the confirmation message but then custom dialog does not close. But if you cancel directly it closes automatically.

Attachment: BlazorAppForSFDialog_365ba648.zip

Priyanka Karthikeyan · Answer

Hi Erciyes,

Thank you for your patience.

We have thoroughly validated the reported issue. In your implementation, after calling the AlertAsync method upon clicking the confirm button, the parent dialog does not close as expected. Upon further analysis, we found that in MyFirstComponent.razor, you are invoking OnConfirmed.InvokeAsync(cmd);. Once this line is executed, the control does not proceed to the next line, which leads to a conflict and prevents the parent dialog from closing — even though IsVisible is set to false after the InvokeAsync call.

To resolve this, we recommend setting the IsVisible property to false before the child dialog is opened. This ensures that the parent dialog closes properly without conflict.

Please find the updated code snippet and sample below for your reference:

private async void ConfirmDialog(bool confirmed)
    {
        if (confirmed)
        {
            var valid = _editContext?.Validate() ?? false;
            this.IsVisible = false;
            if (valid)
            {
                await Task.Delay(1000);
                var cmd = new AppCmdArgs
                {
                        CoilNo = _model.CoilNo,
                        CutNumber = _model.CutNumber,
                        CommandName = "FirstCommand",
                        DialogName = ComponentName
                };
                await OnConfirmed.InvokeAsync(cmd);
            }
            else
            {
                return;
            }
        }

    }

Regards,

Priyanka K

Attachment: BlazorAppForSFDialog_38c86e08.zip