Nested Dialog showing Echo of dialog

I am trying to open a dialog from inside another dialog but when I open the 2nd dialog a echo or shadow of the 2nd dialog appears with the active dialog ! Attached is a screen shot.DialogEcho|690x457

Here is the code to open the 1st dialog:

     new Dictionary<string, object>() { { "qtaList", qtaList } },
     new DialogOptions() { Width = "700px", Height = "700px", Left = "calc(0% - 200px)", Top = "10%" }```

**Here is the code that opens the 2nd dialog:**
```dialogService.Open("Add New Answer", ds =>
                @<RadzenCard Style="padding: 20px;">
                    <EditForm class="form-group" Model="@newAnswer" OnValidSubmit="AddAnswer">
                        <div class="row my-3 mx-1">
                            <label for="AnswerText" class="mx-2">Answer Text:</label>
                            <input name="AnswerText" class="form-control" @bind-value="newAnswer.AnswerText" required />
                        </div>
                        <div class="row my-3 mx-1">
                            <label for="AnswerOrder" class="mx-2">Order:</label>
                            <input name="AnswerOrder" class="form-control col-sm-3" @bind-value="newAnswer.Order" required type="number" />
                        </div>
                        <div class="row my-3 mx-1">
                            <label for="AnswerActive" class="mx-2">Active:</label>
                            @if (newAnswer.Active)
                            {
                                <div class="form-check checkbox-rounded checkbox-living-coral-filled mb-2">
                                    <input type="checkbox" name="TabActive" class="form-check-input filled-in" checked @bind-value="newAnswer.Active" />
                                </div>
                            }
                            else
                            {
                                <div class="form-check checkbox-rounded checkbox-living-coral-filled mb-2">
                                    <input type="checkbox" name="TabActive" class="form-check-input filled-in" @bind-value="newAnswer.Active" />
                                </div>
                            }
                        </div>
                        <button class="btn btn-primary my-2" type="submit">Add Answer and Add to Question</button>
                        @if (SaveSuccessful)
                        {
                            <label class="alert alert-success">Save Successful</label>
                            <button id="btnAddSaveSuccess" class="btn btn-success" type="button" @onclick="btnSaveSuccesClick">Clear Fields</button>
                        }
                    </EditForm>
                </RadzenCard>,
                new DialogOptions() { Width = "500px", Height = "500px", Left = "-30%", Top = "10%" }
                );
                    );```

Hi @dataduncan

This forum supports markdown. Please wrap your code with ``` to format it properly.

Thank you. I was wondering how to get the code more readable/

It looks as if the dialog is opened twice. However we cannot determine why from the provided code. If you manage to reproduce the issue in a complete code snippet we would be able to troubleshoot further.

The way I have this designed to function is: There is a list of questions displayed on the page. You select the action ddl option "add/edit answer". This opens the 1st dialog box. In this box answers for questions are added and displayed. To open the 2nd dialog you select "Add New" from the ddl at the top of the dialog. This opens the dialog that appears to get the shadow.

I have traced the code and I have not seen the dialogService.Open not execute twice, but that did get me thinking. Could the injection of the DialogService in both components be causing this shadow effect?

Here is the Razor code for the 1st component Question.razor:

@using WPT2_Client_Blazor.Repositories

@inject DialogService dialogService
@inject NotificationService notificationService

<RadzenDialog />
<RadzenNotification />

<div id="divAddTabButton" class="col-sm-12">
    <button id="btnAddTab" type="submit" @onclick="btnAddQuestionClick" class="btn btn-primary col-sm-3 my-2">Add Question</button>
</div>
<div id="divTabList" class="col-sm-12">
    <table class="table table-bordered table-striped">
        <thead>
            <tr>
                <th>Action</th>
                <th>Question ID</th>
                <th>Question Text</th>
                <th>Order</th>
                <th>Active</th>
                <th>Question Type</th>
            </tr>
        </thead>
        <tbody>
            @foreach (var question in questionList)
            {
                <tr>
                    <td>
                        <select name="ddlAction" id="ddlAction" class="form-control" @bind="@ddlActionValue">
                            <option value="-1">Select Option</option>
                            <option value="C-@question.QuestionID">Edit Question</option>
                            <option value="D-@question.QuestionID">Change Active</option>
                            <option value="A-@question.QuestionID">Add/Edit Answer</option>
                        </select>
                    </td>
                    <td>@question.QuestionID</td>
                    <td>@question.QuestionText</td>
                    <td>@question.Order</td>
                    <td>@question.Active</td>
                    <td>@question.TypeDescription</td>
                </tr>
            }
        </tbody>
    </table>
</div>


@code {
    private string _ddlActionValue;
    private string ddlActionValue
    {
        get => _ddlActionValue;
        set
        {
            _ddlActionValue = value;
            ddlActionSelectionChanged();
        }
    }
    private string _ddlQuestionType;
    private string ddlQuestionType
    {
        get => _ddlQuestionType;
        set { _ddlQuestionType = value; }
    }
    private string AddPopupTitle = string.Empty;
    private string AddPopupBtnTitle = string.Empty;
    private string DeactivateLabel = string.Empty;
    private QuestionsModel newQuestion = new QuestionsModel();
    private static QuestionsRepository questionData = new QuestionsRepository();
    private static QuestionsToAnswersRespository QAData = new QuestionsToAnswersRespository();
    private IEnumerable<QuestionsModel> questionList = questionData.GetAll();
    private IEnumerable<QuestionTypesModel> qTypeList = questionData.PopulateQuestionTypes();
    private static QuestionsToAnswersRespository qaData = new QuestionsToAnswersRespository();
    private IEnumerable<QuestionToAnswersModel> qtaList;

    private void btnAddQuestionClick()
    {
        AddPopupTitle = "Add Question";
        AddPopupBtnTitle = "Add";
        newQuestion.Active = true;
        newQuestion.QuestionText = string.Empty;
        newQuestion.QuestionID = null;
        ddlQuestionType = string.Empty;
        OpenAddEditQuestion();
    }

    private void AddUpdateQuestion()
    {
        if (ddlQuestionType.Length > 0)
        { newQuestion.TypeID = int.Parse(ddlQuestionType); }
        if (AddPopupTitle == "Add Question")
        {
            newQuestion.Active = true;
            try
            {
                questionData.Insert(newQuestion);
                ShowNotification(new NotificationMessage() { Severity = NotificationSeverity.Success, Summary = "Save Success", Detail = "", Duration = 4000 });
            }
            catch
            { ShowNotification(new NotificationMessage() { Severity = NotificationSeverity.Error, Summary = "Save Error", Detail = "", Duration = 4000 }); }
        }
        if (AddPopupTitle == "Modify Question")
        {
            questionData.Update(newQuestion);
        }
        questionList = questionData.GetAll();
    }

    private void ddlActionSelectionChanged()
    {
        string[] Action = ddlActionValue.Split('-');
        newQuestion = questionData.GetByID(int.Parse(Action[1]));
        switch (Action[0])
        {
            case "C":
                AddPopupTitle = "Modify Question";
                AddPopupBtnTitle = "Save";
                ddlQuestionType = newQuestion.TypeID.ToString();
                OpenAddEditQuestion();
                break;

            case "D":
                if (newQuestion.Active)
                {
                    DeactivateLabel = string.Format("Deactivate {0}", newQuestion.QuestionText);
                }
                else
                {
                    DeactivateLabel = string.Format("Activate {0}", newQuestion.QuestionText);
                }
                dialogService.Open("Confirm Activation/Deactivation", ds =>
                    @<RadzenCard Style="padding: 20px;">
                        <div class="row">Are you sure you want to @DeactivateLabel?</div>
                        <div class="row">
                            <button class="btn btn-primary col-sm-2 mx-2" @onclick="Deactivate">Yes</button>
                            <button class="btn btn-secondary col-sm-2" @onclick="() => ds.Close(false)">No</button>
                        </div>
                    </RadzenCard>,
                    new DialogOptions() { Width = "500px", Height = "200px", Left = "calc(0% - 200px)", Top = "10%" }
                    );
                    break;

                case "A":
                    qtaList = qaData.GetAnswersForQuestion(int.Parse(newQuestion.QuestionID.ToString()));
                    dialogService.Open<Answers>("Manage Answers",
                    new Dictionary<string, object>() { { "qtaList", qtaList } },
                    new DialogOptions() { Width = "700px", Height = "700px", Left = "calc(0% - 200px)", Top = "10%" }
                    );
                    break;
            }
        }

    private void ClosePopup()
    {
        ddlActionValue = "-1";
    }

    private void Deactivate()
    {
        if (string.Format("D-{0}", newQuestion.QuestionID) == ddlActionValue)
        {
            newQuestion.Active = !newQuestion.Active;
            string ActiveVal = newQuestion.Active ? "Successful Activation" : "Successfull Deactivation";
            try
            {
                questionData.Update(newQuestion);
                ShowNotification(new NotificationMessage() { Severity = NotificationSeverity.Success, Summary = ActiveVal, Detail = "", Duration = 4000 });
            }
            catch
            {
                ShowNotification(new NotificationMessage() { Severity = NotificationSeverity.Error, Summary = "Active/Deactive Error", Detail = "", Duration = 4000 });
            }
            questionList = questionData.GetAll();
            ClosePopup();
        }
    }

    private void ShowNotification(NotificationMessage message)
    {
        notificationService.Notify(message);
    }

    private void OpenAddEditQuestion()
        {
            dialogService.Open(AddPopupTitle, ds =>
            @<RadzenCard Style="padding: 20px;">
                <EditForm class="form-group" Model="@newQuestion" OnValidSubmit="AddUpdateQuestion">
                    <label for="QuestionText">Question Text:</label>
                    <input name="QuestionText" class="form-control" @bind-value="newQuestion.QuestionText" required />
                    <label for="QuestionOrder">Order:</label>
                    <input name="QuestionOrder" class="form-control" @bind-value="newQuestion.Order" required type="number" />
                    <label for="QuestionActive">Active:</label>
                    @if (newQuestion.Active)
                                {<input type="checkbox" name="TabActive" checked @bind-value="newQuestion.Active" /> }
                        else
                        { <input type="checkbox" name="TabActive" @bind-value="newQuestion.Active" />}
                    <br />
                    <div class="row my-3 mx-1">
                        <label for="ddlTypeID" class="mx-2">Answer Type:</label>
                        <select name="ddlTypeID" class="form-control col-sm-4" @bind="@ddlQuestionType" required>
                            <option value=""></option>
                            @foreach (QuestionTypesModel qtm in qTypeList)
                            {
                                <option value="@qtm.TypeID">@qtm.Description</option>
                            }
                        </select>
                    </div>
                    <button class="btn btn-primary my-2" type="submit">@AddPopupBtnTitle</button>
                    <button class="btn btn-secondary my-2" type="button" @onclick="()=> ds.Close(false)">Close</button>
                </EditForm>
            </RadzenCard>,
            new DialogOptions() { Width = "500px", Height = "500px", Left = "calc(0% - 200px)", Top = "10%" }
            );
        }
}

And here is the Razor code for the 2nd component Answer.razor:

@using WPT2_Client_Blazor.Repositories

@inject DialogService dialogService
<RadzenDialog></RadzenDialog>

<div class="col-sm-12">
    <div class="row">
        <label for="ddlAddType" class="mx-2">Select Option for question below:</label>
        <select id="ddlAddType" class="form-control col-sm-4" @bind="ddlAddType">
            <option value="-1" selected>Selct One</option>
            <option value="A">Add New</option>
            <option value="E">Add Existing</option>
        </select>
    </div>
</div>
<div class="col-sm-12" style="background-color:lightcyan">
    <label><b>Question Type:</b> @qtaList.First().QuestionTypeText</label>
</div>
<div class="row">&nbsp;</div>
<div class="col-sm-12" style="background-color:lightskyblue"><b>Question:</b></div>
<div class="col-sm-12" style="background-color:lightskyblue">
    <label for="lblQuestion"> @qtaList.First().QuestionText</label>
</div>
<div class="row">&nbsp;</div>
@if (qtaList.Count() > 1)
{
    <table class="table table-bordered table-striped">
        <thead>
            <tr>
                <td>Action</td>
                <td>Answer</td>
                <td>Order</td>
            </tr>
        </thead>
        @foreach (QuestionToAnswersModel qta in qtaList)
        {
            <tr>
                <td>
                    <select name="ddlAnswerAction" id="ddlAnswerAction" class="form-control" @bind="@ddlAnswerAction">
                        <option value="">Select Action</option>
                        <option value="D-@qta.AnswerID">Change Active</option>
                        <option value="O-@qta.AnswerID">Change Order</option>
                    </select>
                </td>
                <td>@qta.AnswerText</td>
                <td>@qta.AnswerOrder</td>
            </tr>
        }
    </table>
}
else
{
    <div class="col-sm-12">
        <h4>There are no answers currently assigned this question.</h4>
    </div>
}
<hr style="height:2px" />
@if (ShowExisting)
{
    <!-- This is the popup to Add Answer -->
    <div class="modal" tabindex="-1" style="display:block;" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content" style="border: 4px solid cornflowerblue;">
                <div class="modal-header" style="background-color:cornflowerblue">
                    <h3 class="modal-title">Add Existing Answer</h3>
                    <!-- Button to close the popup -->
                    <button type="button" class="close"
                            @onclick="ClosePopup">
                        <span aria-hidden="true">X</span>
                    </button>
                </div>
                <div class="modal-body">
                    <label for="ddlExistingAnswer">Select Existing Answer:</label>
                    <select name="ddlExistingAnswer" class="form-control" @bind="@ddlExistingAnswer">
                        <option value=""></option>
                        @foreach (AnswersModel am in AnswerList)
                        {
                            <option value="@am.AnswerID">@am.AnswerText</option>
                        }
                    </select>
                    <button id="btnSaveExisting" class="btn btn-primary" type="button" @onclick="btnSaveExistingClick">Save Existing</button>
                    @if (SaveSuccessful)
                    {
                        <label class="alert alert-success">Save Successful</label>
                        <button id="btnExistingSaveSuccess" class="btn btn-success" type="button" @onclick="btnSaveSuccesClick">Clear Fields</button>
                    }
                </div>
            </div>
        </div>
    </div>
}


@code {
    [Parameter]
    public IEnumerable<QuestionToAnswersModel> qtaList { get; set; }
    private string _ddlAddType;
    private string ddlAddType
    {
        get => _ddlAddType;
        set { _ddlAddType = value; ddlAddTypeChanged(); }
    }
    private string _ddlExistingAnswer;
    private string ddlExistingAnswer
    {
        get => _ddlExistingAnswer;
        set { _ddlExistingAnswer = value; }
    }
    private string _ddlAnswerAction;
    private string ddlAnswerAction
    {
        get => _ddlAnswerAction;
        set { _ddlAnswerAction = value; ddlAnswerActionChanged(); }
    }
    private bool ShowAdd = false;
    private bool ShowExisting = false;
    private bool SaveSuccessful = false;
    private AnswersModel newAnswer = new AnswersModel();
    private static AnswersRepository answerData = new AnswersRepository();
    private IEnumerable<AnswersModel> AnswerList = answerData.PopulateAnswers();
    private static QuestionsToAnswersRespository qaData = new QuestionsToAnswersRespository();

    private void AddAnswer()
    {
        try
        {
            newAnswer.Active = true;
            newAnswer.AnswerID = answerData.Insert(newAnswer);
            if (newAnswer.AnswerID < 1)
            { return; }
            qaData.Insert(int.Parse(qtaList.First().QuestionID.ToString()), int.Parse(newAnswer.AnswerID.ToString()));
            SaveSuccessful = true;
        }
        catch (Exception ex)
        {
            SaveSuccessful = false;
        }
    }

    private void ddlAddTypeChanged()
    {
        switch (ddlAddType)
        {
            case "A":
                dialogService.Open("Add New Answer", ds =>
    @<RadzenCard Style="padding: 20px;">
        <EditForm class="form-group" Model="@newAnswer" OnValidSubmit="AddAnswer">
            <div class="row my-3 mx-1">
                <label for="AnswerText" class="mx-2">Answer Text:</label>
                <input name="AnswerText" class="form-control" @bind-value="newAnswer.AnswerText" required />
            </div>
            <div class="row my-3 mx-1">
                <label for="AnswerOrder" class="mx-2">Order:</label>
                <input name="AnswerOrder" class="form-control col-sm-3" @bind-value="newAnswer.Order" required type="number" />
            </div>
            <div class="row my-3 mx-1">
                <label for="AnswerActive" class="mx-2">Active:</label>
                @if (newAnswer.Active)
                {
                    <div class="form-check checkbox-rounded checkbox-living-coral-filled mb-2">
                        <input type="checkbox" name="TabActive" class="form-check-input filled-in" checked @bind-value="newAnswer.Active" />
                    </div>
                }
                else
                {
                    <div class="form-check checkbox-rounded checkbox-living-coral-filled mb-2">
                        <input type="checkbox" name="TabActive" class="form-check-input filled-in" @bind-value="newAnswer.Active" />
                    </div>
                }
            </div>
            <button class="btn btn-primary my-2" type="submit">Add Answer and Add to Question</button>
            @if (SaveSuccessful)
            {
                <label class="alert alert-success">Save Successful</label>
                <button id="btnAddSaveSuccess" class="btn btn-success" type="button" @onclick="btnSaveSuccesClick">Clear Fields</button>
            }
        </EditForm>
    </RadzenCard>,
new DialogOptions() { Width = "500px", Height = "500px", Left = "-30%", Top = "10%" }
);
break;

case "E":
ShowAdd = false;
ShowExisting = true;
break;
}
}

private void btnSaveSuccesClick()
{
newAnswer.AnswerID = 0;
newAnswer.AnswerText = string.Empty;
newAnswer.Order = 0;
ddlExistingAnswer = string.Empty;
SaveSuccessful = false;
}

private void btnSaveExistingClick()
{
qaData.Insert(int.Parse(qtaList.First().QuestionID.ToString()), int.Parse(ddlExistingAnswer));
SaveSuccessful = true;
}

private void ddlAnswerActionChanged()
{
string[] Action = ddlAnswerAction.Split('-');
switch (Action[0])
{
case "D":
//ShowDeactivatePopup = true;
//if (newQuestion.Active)
//{
//    DeactivateLabel = string.Format("Deactivate {0}", newQuestion.QuestionText);
//}
//else
//{
//    DeactivateLabel = string.Format("Activate {0}", newQuestion.QuestionText);
//}
break;

case "O":
//ShowAnswersPopup = true;
//qtaList = qaData.GetAnswersForQuestion(int.Parse(newQuestion.QuestionID.ToString()));
break;
}
}

private void ClosePopup()
{
ShowExisting = false;
ShowAdd = false;
}
}

The double injection shouldn't cause this problem. I am afraid that we can't help more unless we reproduce the error.

Do you by chance have a sample of 1 component opening a dialog that opens a 2nd component that opens another dialog?

Hi there,

Did you solve it somehow ? I have the same problem.

Thank you

I figured it out so i leave it here in case anyone else has the same problem.
What is creating the problem is that both components have <RadzenDialog />, so
everything is triggered twice. What i did was conditionally adding it on my razor component.