Hello,
I am currently reworking an old webapp with server-side Blazor and Telerik UI for Blazor. I noticed that TelerikDialogs kind of break the rerendering of child components if the TelerikDialog and all of its content are placed inside their own component:
<PageTitle>Home</PageTitle>
<EditWithDialog @ref="EditDialogInside"></EditWithDialog>Where EditWithDialog is (basically) defined as follows:
<TelerikDialog @ref="Dialog" @bind-Visible="@Visible">
<DialogTitle>
Edit ID
</DialogTitle>
<DialogContent>
<div>
<div>TelerikDialog inside of component</div>
<TelerikTextBox Value="@AppState.CustomerString" OnChange="@SetID" Width="300px"></TelerikTextBox>
<TelerikButton OnClick="@GenerateID">Generate ID</TelerikButton>
</div>
</DialogContent>
<DialogButtons>
<TelerikButton OnClick="@ToggleVisible">Close</TelerikButton>
</DialogButtons>
</TelerikDialog>
However, if the TelerikDialog is placed on a page and its content is placed inside of its own component, everything works as expected:
<PageTitle>Home</PageTitle>
<TelerikDialog @bind-Visible="@Visible">
<DialogTitle>
Edit ID
</DialogTitle>
<DialogContent>
<div>
<div>TelerikDialog outside of component</div>
<EditWithoutDialog @ref="EditDialogOutside"></EditWithoutDialog>
</div>
</DialogContent>
<DialogButtons>
<TelerikButton OnClick="@ToggleEditOutside">Close</TelerikButton>
</DialogButtons>
</TelerikDialog>EditWithoutDialog.razor:
<TelerikTextBox Value="@AppState.CustomerString" OnChange="@SetID" Width="300px"></TelerikTextBox>
<TelerikButton OnClick="@GenerateID">Generate ID</TelerikButton>I am using the state-container approach described here, but the problem persists when using two-way binding via parameters.
In this scenario, putting the dialog directly on the page is not a problem, but with larger applications where there's possibly multiple dialogs and a lot more content on one page, this can become very unwieldy and confusing. Considering Blazors emphasis on making components reusable, this also prevents proper use of a customized dialog component that uses the TelerikDialog as a base.
I have attached a small project that implements both versions on a single page for you to test. I have tested using both Edge and Firefox.
