Mobile view freezes screen when closing DatePicker

[Mark Nuns]

I'm currently seem to have an issue that only occurs when viewing a Blazor page and using the DatePicker on a mobile view.

When you click on the calendar icon next to the DateTime picker inputbox and the calendar appears - when you click outside the calendar, the calendar popup disspears, but the overlay remains which freezes the screen

This is the code snippet behind these input boxes:

<SfDatePicker TValue="DateTime?" Placeholder="Choose a Date" @bind-Value="@CalendarEventView.FromDateTime" @ref="@FromDatePicker">

 <DatePickerEvents TValue="DateTime?" Focus="FocusHandlerFromDate"></DatePickerEvents>

</SfDatePicker>

<ValidationMessage For="@(() => CalendarEventView.FromDateTime)" />

@code {

private SfDatePicker<DateTime?> FromDatePicker { get; set; }

private void FocusHandlerFromDate(FocusEventArgs args)

{

  this.DateFromDate.Show();

}

 public class CalendarEvent

{

[Required(ErrorMessage = "Value can not be empty")]

public DateTime? FromDateTime { get; set; }

}

}

Thanks in advance for any help

[Sureshkumar P]

Hi Mark, 

 

Greetings from Syncfusion support. 

 

Based on your shared information with code example, you have called the public show method when component in focus state. So, after close the popup element component will focus the datepicker input element that is the reason the popup still in open state after you have close the popup element. please update the exact reason to showcase the popup when component focus. We will provide you the exact solution as earlier as possible. 

 

Regards, 

Sureshkumar P 

[Mark Nuns]

Thanks for the reply.

I'm using the show so allow the DateTime Dialog window to be shown when the user clicks the input box. Ideally I would like the user to only select a date via the dialog box and have no manual entries

[Sureshkumar P]

Hi Mark, 

 

Thanks for your update. 

 

Based on your shared information, we suggest you use our AllowEdit property value as false to restrict the manual entering value into the datepicker component. we have prepared the sample based on your requirement. please find the sample below. 

 

Please find the sample code here: 

<EditForm Model="CalendarEventView"> 

    <DataAnnotationsValidator /> 

 

    <SfDatePicker TValue="DateTime?" Placeholder="Choose a Date" AllowEdit="false" @bind-Value="@CalendarEventView.FromDateTime" @ref="@FromDatePicker"> 

        <DatePickerEvents TValue="DateTime?" Focus="FocusHandlerFromDate"></DatePickerEvents> 

    </SfDatePicker> 

    <ValidationMessage For="@(() => CalendarEventView.FromDateTime)" /> 

</EditForm> 

 

@code { 

    private SfDatePicker<DateTime?> FromDatePicker { get; set; } 

 

    private void FocusHandlerFromDate(Syncfusion.Blazor.Calendars.FocusEventArgs args) 

    { 

        this.FromDatePicker.Show(); 

    } 

 

    public class CalendarEvent 

    { 

        [Required(ErrorMessage = "Value can not be empty")] 

        public DateTime? FromDateTime { get; set; } 

    } 

 

    CalendarEvent CalendarEventView = new CalendarEvent(); 

 

} 

 

 

 

Sample link: https://www.syncfusion.com/downloads/support/forum/160638/ze/DatePicker1172420644  

 

Regards, 

Sureshkumar P 

[Mark Nuns]

Thanks for that, the AllowEdit feature was very useful.

I'm still having an issue though when a user on a mobile clicks the date icon and then after the calendar dialog appears - the user clicks off screen, the dialog closes but the screen overlay remains

Any ideas on how to fix that?

Thanks again!

[Sureshkumar P]

Hi Mark, 

 

Thanks for your update. 

 

Based on your shared information, we cannot able to replicate the reported issue from our end. we have attached the validated video demonstration below. 

 

please share the below details to check the requirement. 

1.     Share if any specific device you have facing the reported issue then share the device details. 

2.     If possible, share the issue replicated sample with detailed issue replication procedure. 

These details will help us to provide exact solution as earlier as possible. 

 

Please find the video demonstration for mobile testing: https://www.syncfusion.com/downloads/support/forum/160638/ze/DatePickerPopup1578277173  

 

Regards, 

Sureshkumar P