Strange Behavior in Predefined Dialogs in the Blazor Dialog Component

[Tom Johnes]

Hello !

I am trying to use  Predefined dialogs in the Blazor Dialog component.

When I run the following code, some strange behavior appear...

When I press the OK button of the dialog, the vertical scroll of the entire page disappears !

When I press the CLOSE button or ESCape key, everything is normal and the vertical scroll bar of the page is back in place.

I am using Visual Studio 2022, .NET 6 and Firefox 108.0.1 (64-bit).

Can you tell me what is wrong ?

Thank You Very Much !

@page "/alerttest"

@using Blazored.Toast.Configuration

@using Syncfusion.Blazor.Popups

@inject SfDialogService DialogService

@inherits LayoutComponentBase

   <div>

        <button @onclick="MyAlertFunction">Alert</button>

    </div>

<SfGrid DataSource="@Orders" @ref="Grid" AllowGrouping="true" AllowPaging="true" Height="800">

    <GridEvents TValue="Order"></GridEvents>

    <GridColumns>

        <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right" Width="120"></GridColumn>

        <GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" Width="150"></GridColumn>

        <GridColumn Field=@nameof(Order.OrderDate) HeaderText=" Order Date" Format="d" Type="ColumnType.Date" TextAlign="TextAlign.Right" Width="130"></GridColumn>

        <GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" Width="120"></GridColumn>

    </GridColumns>

</SfGrid>

@code{

    SfGrid<Order> Grid;

    public List<Order> Orders { get; set; }

    protected override void OnInitialized()

    {

        Orders = Enumerable.Range(1, 275).Select(x => new Order()

        {

            OrderID = 1000 + x,

            CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)],

            Freight = 2.1 * x,

            OrderDate = DateTime.Now.AddDays(-x),

        }).ToList();

    }

    public class Order

    {

        public int? OrderID { get; set; }

        public string CustomerID { get; set; }

        public DateTime? OrderDate { get; set; }

        public double? Freight { get; set; }

    }

    private async Task MyAlertFunction()

    {

        var VAR_ALERT_TITLE = "Warning !";

        var VAR_ALERT_TEXT = "Input value is incorrect ! ";

        await AlertBtn(VAR_ALERT_TITLE, VAR_ALERT_TEXT);

    }

    private async Task AlertBtn(string VAR_ALERT_TITLE, string VAR_ALERT_TEXT)

                {

                    await DialogService.AlertAsync(VAR_ALERT_TEXT, VAR_ALERT_TITLE,

                        new DialogOptions()

                        {

                            ShowCloseIcon =true,

                         });

                }

}

[Vinothkumar Yuvaraj]

Hi Tom Johnes,

We have logged the reported issue as a bug on our end, and a fix will be included in our patch release scheduled for the end of January 2023. You can track the status of the issue by using the below feedback link.

Feedback Link :  https://www.syncfusion.com/feedback/40086/the-vertical-scroll-disappears-when-you-click-the-dialog-ok-button

Disclaimer: “Inclusion of this solution in the weekly release may change due to other factors including but not limited to QA checks and works reprioritization.”

Regards,

Vinothkumar

[prostoyturak]

A temporary solution is paste the css code to page. Scroll bars always will be visible. Even on dialog is appeared.

 .e-dlg-target.e-scroll-disabled {

        overflow: visible !important;

    }

[Vinitha Jeyakumar]

Hi prostoyturak,

Thanks for your suggested solution.

Regards,

Vinitha

[Vinitha Jeyakumar]

Hi Tom,

We have included the fix for the issue "The vertical scroll disappears when you click the dialog OK button" with our package version 20.4.43. So, can you please upgrade your package to the latest to resolve the issue from your end.

Release notes: https://blazor.syncfusion.com/documentation/release-notes/20.4.43?type=all#dialog

Regards,

Vinitha