Unplanned
Last Updated: 21 Sep 2021 14:45 by ADMIN
Mark
Created on: 13 Apr 2021 07:19
Category: Dialog
Type: Bug Report
5
Predefined Dialogs don't cover a modal dialog when the TelerikRootComponent parent does not have display:flex

ADMIN EDIT

You can use the code snippet below to test this behavior in your app. At the end of the post you will find two sample apps attached that use that same code - one is OK, the other exhibits the issue. The difference in them is the layout. The one that works OK has the old MS template from over a year ago where there is an <app> element above the root of the blazor components, and that element has display: flex. The problematic app has the newer template without such a parent element - the parent element is not the <body> and it does not have display:flex. You can add in the following rule to it to see it will fix the dialog overlay error (but it can damage the layout of the app).

sample rule to fix the issue in the problematic app

    body {
        display:flex;
    }

sample code to test the behavior

<TelerikWindow Modal="true" @bind-Visible="@isModalVisible">
    <WindowTitle>
        <strong>The Title</strong>
    </WindowTitle>
    <WindowContent>
        I am modal so the page behind me is not available to the user.
        <br />
        <TelerikButton OnClick="@( _ => isSecondModalVisible = true )">Open the SECOND window</TelerikButton>
        <TelerikButton OnClick="@ShowConfirmWithTitle">Show Confirm</TelerikButton>
    </WindowContent>
    <WindowActions>
        <WindowAction Name="Minimize" />
        <WindowAction Name="Maximize" />
        <WindowAction Name="Close" />
    </WindowActions>
</TelerikWindow>

<TelerikWindow Modal="true" @bind-Visible="@isSecondModalVisible">
    <WindowTitle>
        <strong>The SECOND</strong>
    </WindowTitle>
    <WindowContent>
        Second modal!
    </WindowContent>
    <WindowActions>
        <WindowAction Name="Minimize" />
        <WindowAction Name="Maximize" />
        <WindowAction Name="Close" />
    </WindowActions>
</TelerikWindow>

<TelerikButton OnClick="@( _ => isModalVisible = true )">Open the window</TelerikButton>

@code{
    [CascadingParameter]
    public DialogFactory Dialogs { get; set; }
    bool isModalVisible { get; set; }
    bool isSecondModalVisible { get; set; }
    async Task ShowConfirmWithTitle()
    {
        bool isConfirmed = await Dialogs.ConfirmAsync("Are you sure?", "Confirmation!");

        Console.WriteLine($"The user is sure: {isConfirmed}.");
    }
}

Attached Files:
3 comments
ADMIN
Nadezhda Tacheva
Posted on: 21 Sep 2021 14:45

Hi Chris,

I tested the provided workaround in a sample application that uses version 2.26.0 of Telerik UI for Blazor. I used the same code snipped as listed below and, as the workaround suggests, I added display:flex to the body in the site.css file.

It looks to me that the workaround is working as expected. See project attached and a video of the result. You can also try running it locally and see how it behaves on your side. Then, you can use it as reference to check whether any differences might be causing the issue in your application.

If you run across any other concerns, please let us know. We will be happy to step in and assist.

Regards,
Nadezhda Tacheva
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Chris
Posted on: 14 Sep 2021 22:02
I'm using 2.26.0
Chris
Posted on: 14 Sep 2021 21:56
I don't think this workaround is valid anymore.