On any page that I am opening a dialog I get a second ghost version of the dialog off to the right of the open dialog.
I am opening the dialog with the following code:
protected void OnClick(string test)
{
dialogService.Open<DialogNoteAdd>($"Add Note",
null,
new DialogOptions() { Width = "700px", Height = "400px" });
}
This happens with all the dialogs I open throughout the site.
This is strange indeed - I have never seen this before. Could it be the same dialog that is opened twice?Does the ghost disappear if you close the dialog?
It does disappear when the first is closed.
I don't believe that it is being opened twice, not intentionally anyway.
It seems to be tied to browser width in some way. i.e. If I narrow the browser it gets closer to the actual dialog and the ghost itself gets wider. If I stretch the browser window wider the ghost moves more and more to the right and will disappear off screen if I stretch the browser wide enough (multi monitors)
Can you reproduce this problem on our online demo? We haven't seen anything like this before and I don't recall that anybody has ever reported it.
In the online demo it does not happen. So it must be something in how I am using the component.
The code that I am using is for the most part copy/paste from the online demo.
I have this problem as well. I call the dialog from a service, but from my main screen it always creates a ghost. i can capture 2 OnInitialize events in the component but the closing can become task bound somehow and bring the app to a crawl as if its working in some recursive manner..
Code Below calls the Dialog using YesEnterNoEscDialog. I don't know if there's a clue here.
string YNMessage = "You are currently processing <br /><br />Pharmacy: <strong>" + PLState.PharmacyName + "</strong><br />( ID# <strong>" + PLState.Pharmacy_ID + "</strong>)<br /><br /> Select <strong>Yes</strong> to Continue with that Pharmacy.<br />Select <strong>No</strong> to Make a New Selection.";
bool? answer = await DialogService.OpenAsync<YesEnterNoEscDialog>("Prophet X", new Dictionary<string, object>() { { "Message", YNMessage! }, { "Title", "Continue Processing" } }
, new DialogOptions() { Width = "700px", Height = "360px", Left = "calc(50% - 350px)", Top = "calc(50% - 150px)", ShowClose = false });
Code below for YesEnterNoEscDialog
@using ProphetX.Data
@using ProphetX.PXDataBase
@using ProphetX.Service
@using System.Diagnostics;
@inject Radzen.DialogService dialogService
<div class="row">
<div class="col" style="background-color:#22336C">
<h3 class="text-center text-white">@Title</h3>
</div>
<div class="col-10 offset-1">
<p class="text-center">@((MarkupString)Message)</p>
</div>
<div class="row">
<div class="col-10 offset-1">
<div class="row">
<div class="col-8 offset-2">
<div class="row">
<div class="col-6">
<RadzenButton Click="@((args) => ClickChoice(true))"
ButtonStyle="ButtonStyle.Secondary"
Text="Yes"
@onkeydown="@KeyDown"
Class="mt-2" />
</div>
<div class="col-6">
<RadzenButton Click="@((args) => ClickChoice(false))"
ButtonStyle="ButtonStyle.Secondary"
Text="No"
@onkeydown="@KeyDown"
Class="mt-2" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
@code
{
[Parameter]
public string Message { get; set; } = "";
[Parameter]
public string Title { get; set; } = "";
protected override void OnInitialized()
{
Debug.WriteLine(DateTime.Now.ToString() + "YesNoDialog.Initializing for Message = " + Message);
}
public void KeyDown(KeyboardEventArgs e)
{
if (e.Code == "NumpadEnter" || e.Code == "Enter" || e.Key == "Y" || e.Key == "Keyy")
{
Debug.WriteLine(DateTime.Now.ToString() + " YesNoDialog.Keyboard YES");
ClickChoice(true);
}
if (e.Code == "Escape" || e.Key == "N" || e.Key == "n")
{
Debug.WriteLine(DateTime.Now.ToString() + " YesNoDialog.Keyboard NO");
ClickChoice(false);
}
}
public void ClickChoice(bool answer)
{
dialogService.Close(answer);
}
}
And this is the entire Test Page that does not show ghosting. The ghosting is actually a 2nd copy of the dialog> I chased a CSS idea at first.
@page "/ittools/YesNoDialog"
@using ProphetX.Service
@using ProphetX.Pages.Common
@inject Radzen.DialogService dialogService
<h3>Testing of Yes(Enter)No(Esc) Dialog</h3>
<h2>Test Entry</h2>
<div class="row">
<div class="col-3">
<RadzenLabel Text="Enter title to display:" />
</div>
</div>
<div class="row">
<div class="col-3">
<RadzenTextArea @bind-Value="@Title" Style="width:100%" />
</div>
</div>
<div class="row">
<div class="col-3">
<RadzenLabel Text="Enter message to display:" />
</div>
</div>
<div class="row">
<div class="col-3">
<RadzenTextArea @bind-Value="@Message" Style="width:100%" />
</div>
</div>
<div class="row">
<div class="col-3">
<RadzenButton Click="ShowDialog" Text="Run Test" />
</div>
</div>
<hr />
<h2>Results</h2>
<p>@testresponse</p>
@code {
public string? Title { get; set; } = "Messagebox Title";
public string? Message { get; set; } = "This is the test message box test. Observe differences";
private string? testresponse;
protected override async Task OnInitializedAsync()
{
testresponse = "";
bool? answerin = await dialogService.OpenAsync<YesEnterNoEscDialog>($"On Init", new Dictionary<string, object>() { { "Message", @Message! }, { "Title", @Title! } }
, new DialogOptions() { Width = "700px", Height = "215px", Left = "calc(50% - 350px)", Top = "calc(50% - 150px)", ShowClose = false });
bool answer = answerin == null ? false : (bool)answerin;
if (answer)
testresponse = "Answer is YES (True)";
else
testresponse = "anwer is NO (False)";
}
async Task ShowDialog()
{
testresponse = "";
bool answer = await dialogService.OpenAsync<YesEnterNoEscDialog>($"On Click", new Dictionary<string, object>() { { "Message", @Message! }, { "Title", @Title! } }
, new DialogOptions() { Width = "700px", Height = "215px", Left = "calc(50% - 350px)", Top = "calc(50% - 150px)", ShowClose = false });
if (answer)
testresponse = "Answer is YES (True)";
else
testresponse = "anwer is NO (False)";
}
}
Make sure you are not opening the dialog more than once. You can use the debugger to see when the DialogService methods are called.
Thanks for the quick reply. I have set Debug. WriteLine statements and I see the Initialize event fire twice, but then it get sticky on the return. The response may get lost in my other log entries, so with your interest I'll do a more comprehensive run on it. I'm not calling it twice that I can see.
It does seem to become task bound sometimes when this symptom shows. other times it seems, and I know this sounds weird, but you have to click twice if you click easy, if you click hard only once. Which makes no sense, but this has been a problem I've been hunting unsuccessfully for months.
And the other strange part is that, my builds do not seem to get task bound like it does in Visual Studio.
I am not sure what "task bound" means. Without some reproduction I won't be able to help further. All that I know is that ghosting happens if more than one dialog is opened at the same time.
These are single calls and I can demonstrate. but the project is too large and uses 3 databases, so I can't pack it up. I am sure its not a dialog called from a dialog.
Today I pulled it out of the service, embedding the code as private async in the razor page,
i also went back to .Confirm() method to remove my razor component, and it still happens there as well.
Perhaps I should have opened a new issue, apologies. I don't' need much help so I don't ask often.
I didn't notice this was 2021 immediately.
By Task-Bound I mean one symptom is that it's like in recursive loop, or stuck awaiting something.UX stops responding, no indication of a circuit break, it's just busy. Visual Studio power spikes, CPU spikes, Edge power consumption spikes! if you break it by pressing F5 and refreshing the page, you get your new page and THEN the async Tasks from before run or finish as it were, as indicated by my log output that spits out after the refresh.
Lastly, I want to say. I'm an experienced developer. I've been a proponent of Radzen controls to anyone that would listen since 3.1. This project I have been developing for a customer in the pharma industry for nearly 18 months. Very complicated.
I am just now in the 2nd week of user testing and the nature of this issue takes me away from application problem solving, which is key right now.
I have an application with a major screen that experiences this all the way thru.
It also has a test page, calling the same logic that doesn't experience it at all.
I have not been successful in resolving the difference.
I'm not doubting that it is somehow being called twice, I can show that in my log. but I can't understand why it seems to be locking up my pages. I say It i mean it OR how my implementation of it could be double it up. I can't see it in the code.
I only reached out because I saw someone else had the issue, and I hope maybe we could help other.
I suggest running it with the debugger and tracing what opens the dialog. Without reproduction I won't be able to assist further. You can try reproducing the issue in a simple project without a database. Those issues are rarely database related.
I've been doing that in and over trying for a month or two.
My dialog box code is pasted above. it's pretty simple and it doesn't call into itself.
I do use the dialog refernce to call it and inside the component use a dialog refernce to close
It certainly does present itself as if Im calling it twice, but im not, unless somehow implicitly
The last thing I can suggest is to attach the Radzen.Blazor source code and put a breakpoint in the OpenAsync method of the DialogService. It will show what code is invoking it multiple times.
Thanks, I updated my radzen copy earlierd today.
same thought in mind. thanks for the direction.
I made tfs-less copy of my app and connected to Radzen source. I placed Debug.WriteLine messages in OpenAsyn Open and Close and received the following message stream. Time stamped. Of note, the shadow is multiple occurrencea. I had to press the close button multiple times... got no log entries r response until after a pause... then it sort of 'caught up' over the time span as you see displayed.
I will test further but wanted to post this in case you have any recommendation.
LogInfo:11/2/2023 9:05:56 AM 1006|ReturnMain|StartCreateNewDebitMemo|Type: Standard
LogInfo:11/2/2023 9:05:56 AM 1006|ReturnMain|StartCreateNewDebitMemo|Ask about creating a new debit memo XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
11/2/2023 9:05:56 AM Radzen.DialogService.OpenAsync
11/2/2023 9:05:56 AM Radzen.DialogService.OpenDialog
- During this time I clicked Close 8 or 10 times it seemed...
11/2/2023 9:06:25 AM Radzen.DialogService.Close
LogInfo:11/2/2023 9:06:25 AM 11/2/2023 9:06:25 AM Confirmation? You pressed YES
LogInfo:11/2/2023 9:06:25 AM 1006|ReturnMain|StartCreateNewDebitMemo|Ask - Answer is YES
LogInfo:11/2/2023 9:06:25 AM 1006|ReturnMain|StartCreateNewDebitMemo|Switch Panel to help
11/2/2023 9:06:32 AM Radzen.DialogService.Close
11/2/2023 9:06:34 AM Radzen.DialogService.Close
11/2/2023 9:06:35 AM Radzen.DialogService.Close
11/2/2023 9:06:36 AM Radzen.DialogService.Close
11/2/2023 9:06:38 AM Radzen.DialogService.Close
11/2/2023 9:06:39 AM Radzen.DialogService.Close
11/2/2023 9:06:40 AM Radzen.DialogService.Close
11/2/2023 9:06:41 AM Radzen.DialogService.Close
11/2/2023 9:06:42 AM Radzen.DialogService.Close
11/2/2023 9:06:43 AM Radzen.DialogService.Close
11/2/2023 9:06:44 AM Radzen.DialogService.Close
11/2/2023 9:06:45 AM Radzen.DialogService.Close
11/2/2023 9:06:47 AM Radzen.DialogService.Close
Exception thrown: 'System.Threading.Tasks.TaskCanceledException' in System.Private.CoreLib.dll
Exception thrown: 'System.Threading.Tasks.TaskCanceledException' in System.Private.CoreLib.dll
Exception thrown: 'System.Threading.Tasks.TaskCanceledException' in System.Private.CoreLib.dll
Exception thrown: 'System.Threading.Tasks.TaskCanceledException' in System.Private.CoreLib.dll
11/2/2023 9:06:48 AM Radzen.DialogService.Close
Exception thrown: 'System.Threading.Tasks.TaskCanceledException' in System.Private.CoreLib.dll
Exception thrown: 'System.Threading.Tasks.TaskCanceledException' in System.Private.CoreLib.dll
Exception thrown: 'System.Threading.Tasks.TaskCanceledException' in System.Private.CoreLib.dll
Exception thrown: 'System.Threading.Tasks.TaskCanceledException' in System.Private.CoreLib.dll
Exception thrown: 'System.Threading.Tasks.TaskCanceledException' in System.Private.CoreLib.dll
Exception thrown: 'System.Threading.Tasks.TaskCanceledException' in System.Private.CoreLib.dll
Exception thrown: 'System.Threading.Tasks.TaskCanceledException' in System.Private.CoreLib.dll
Exception thrown: 'System.Threading.Tasks.TaskCanceledException' in System.Private.CoreLib.dll
Exception thrown: 'System.Threading.Tasks.TaskCanceledException' in System.Private.CoreLib.dll
Exception thrown: 'System.Threading.Tasks.TaskCanceledException' in System.Private.CoreLib.dll
Exception thrown: 'System.Threading.Tasks.TaskCanceledException' in System.Private.CoreLib.dll
Exception thrown: 'System.Threading.Tasks.TaskCanceledException' in System.Private.CoreLib.dll
11/2/2023 9:06:56 AM Radzen.DialogService.Close
My recommendation remains the same - to break with the debugger. Logging won't help much as it doesn't show what is opening the dialogs.
I PUT TOGETHER A VIDEO TO SHOW THE ISSUE. It's on my google drive 100mb almost 10 minutes. you can skip half of it becuase it's hard to catch this... and this video has 3 tries in it.
Perhaps you'll have a suggestion after viewing it.
Please give some consideration to helping me. This has been a thorn for around 2 months, i try to fix it, then go back to my app and limp along.
.
I have 14 months into this project that is grinding slowing because I can't use the debugger for much of the debugging i need to do.
and user testing is now in it's 3re week, so, IDK if you've ever been there, but having good vendor support, which you normally do is very important. THIS is a difficult issue, so please don't blow me off again.
I have also been singing Radzens praises to anyone who would listen. I have 3 businesses using Radzen now, incljuding this one.
anyway, this was my message before I was able to capture today's video...
I have single stepped this multiple times. It runs the Component that's called twice.
I cannot find a life-cycle method that runs twice in the area of this code, I've put messges on all events and breaks on all events.
As far as the visual affect, when I call the following code, it completes and displays a single dialog box IF I stop it just in the right place, it will display the dialog properly without the shadow (2nd occurrence)
bool? answer = await DialogService.OpenAsync<YesEnterNoEscDialog>("Prophet X", new Dictionary<string, object>() { { "Message", YNMessage! }, { "Title", "Continue Processing" } }
, new DialogOptions() { Width = "700px", Height = "360px", Left = "calc(50% - 350px)", Top = "calc(50% - 150px)", ShowClose = false });
If I single step further, it goes right back into the properties and initilizes the Called Component YesEnterNoEscDialog a 2nd time, and the visual is of a dialog box with a shadow.
I include the code, as it is now
@using ProphetX.Data
@using ProphetX.PXDataBase
@using ProphetX.Service
@using System.Diagnostics
@inject Radzen.DialogService dialogService
<div class="col-10 offset-1">
<p class="text-center">@((MarkupString)Message)</p>
</div>
<div class="row">
<div class="col-10 offset-1">
<div class="row">
<div class="col-8 offset-2">
<div class="row">
<div class="col-6">
<RadzenButton Click="@((args) => DialogClose(true))"
ButtonStyle="ButtonStyle.Secondary"
Text="Yes"
@onkeydown="@KeyDown"
Class="mt-2" />
</div>
<div class="col-6">
<RadzenButton Click="@((args) => DialogClose(false))"
ButtonStyle="ButtonStyle.Secondary"
Text="No"
@onkeydown="@KeyDown"
Class="mt-2" />
</div>
</div>
</div>
</div>
</div>
</div>
protected override void OnInitialized()
{
Debug.WriteLine("YesEnterNoEscDialog.OnInitialized");
}
protected override void OnAfterRender(bool firstRender)
{
Debug.WriteLine("YesEnterNoEscDialog.OnAfterRender(" + firstRender + ")");
}
protected override void OnParametersSet()
{
Debug.WriteLine("YesEnterNoEscDialog.OnParametersSet()");
}
public void KeyDown(KeyboardEventArgs e)
{
Debug.WriteLine(DateTime.Now.ToString() + " KeyDown:" + e.Key + " - " + e.Code);
if (e.Code == "NumpadEnter" || e.Code == "Enter" || e.Key == "Y" || e.Key == "Keyy")
{
Debug.WriteLine(DateTime.Now.ToString() + " Keboard-YES :)");
DialogClose(true);
}
if (e.Code == "Escape" || e.Key == "N" || e.Key == "n")
{
Debug.WriteLine(DateTime.Now.ToString() + " Keboard-NO :(");
DialogClose(false);
}
}
public void DialogClose(bool answer)
{
Debug.WriteLine("YesEnterNoEscDialog.DialogClose(" + (answer ? "YES" : "NO") + ")");
dialogService.Close(answer);
}
}
The video shows that the dialog is displayed multiple times so there is nothing new.
You can check if you don't have <RadzenDialog /> added more than once in your app. It should be included only once preferably in MainLayout.razor. Having it multiple times would lead to the dialog opening many times.
Another suggestion is this:
Well that's what I am trying to do by replying to this thread so far. Unfortunately I can't find the issue just by watching a video or looking at two code snippets. I am afraid I don't have such super powers.
If you can't use Radzen's debugger use Visual Studio's. Attach the Radzen.Blazor source to your project and put a breakpoint in this method to see which code is invoking it.
So here are the available options to continue:
<RadzenDialog />.