DatePicker nested Dialog does not disapear after Dialog gets closed

[Stefan Heimbach]

Hi

I Created a sample Blazor Serverside Project to visualize my Problem.

I got a datePicker nested inside a dialog.

First I had the problem with the default Method which focuses the first input Element of the dialog.

I could solve that with the args.PreventFocus = true "Workaround".

So far so good. 

But now if I want to escape the dialog by clicking on the overlay the datepicker does not get closed / does not hide.

I tried some stuff like DateObj1.hide() or setting the Enable attribute as false but this does not work.

Is there some way to Prevent the focusing the whole time or what do u think is the problem?

Thanks for ur help.

<SfButton OnClick="@ShowDialog">Show Dialog</SfButton>

<SfDialog IsModal="true"

          ShowCloseIcon="true"

          @bind-Visible="Visible"

          Width="250"

          Height="250">

    <DialogEvents OnOverlayClick="@OnOverlayclick" Opened='@DialogOpened'></DialogEvents>

    <DialogTemplates>

        <Content>

                <SfDatePicker @ref="@DateObj1" WeekNumber="true" FirstDayOfWeek="1" TValue="DateTime?" Placeholder="Date" FloatLabelType="FloatLabelType.Auto" ShowTodayButton="true" AllowEdit="false">

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

                </SfDatePicker>

        </Content>

    </DialogTemplates>

</SfDialog>

@code{

    public bool Visible { get; set; } = false;

    protected SfDatePicker<DateTime?> DateObj1;

    public void FocusHandler(Syncfusion.Blazor.Calendars.FocusEventArgs args)

    {

        this.DateObj1.Show();

    }

    public void ShowDialog()

    {

        Visible = true;

    }

    protected void OnOverlayclick(MouseEventArgs args)

    {

        Visible = false;

    }

    protected void DialogOpened(Syncfusion.Blazor.Popups.OpenEventArgs args)

    {

        args.PreventFocus = true;

    }

}

[Indrajith Srinivasan]

Hi Stefan, 

 

Greetings from Syncfusion support, 

 

Query :“Is there some way to Prevent the focusing the whole time or what do u think is the problem? “ 

 

We have validated your reported query. By default, if the overlay element is clicked the SfDialog elements will get focused. Since the DatePicker popup is opened on focusing, the reported issue occurs.  In order to make the DataPicker popup disappear on overlay click, we suggest you to check the condition of showing the popup only if the SfDialog is visible. 

 

 

@using Syncfusion.Blazor.Popups 

@using Syncfusion.Blazor.Buttons 

@using Syncfusion.Blazor.Calendars 

@using Syncfusion.Blazor.Inputs 

 

<SfButton OnClick="@ShowDialog">Show Dialog</SfButton> 

 

<SfDialog IsModal="true" 

          ShowCloseIcon="true" 

          @bind-Visible="Visible" 

          Width="250" 

          Height="250"> 

    <DialogEvents OnOverlayClick="@OnOverlayclick" Opened='@DialogOpened'></DialogEvents> 

    <DialogTemplates> 

 

        <Content> 

            <SfDatePicker @ref="@DateObj1" WeekNumber="true" FirstDayOfWeek="1" TValue="DateTime?" Placeholder="Date" FloatLabelType="FloatLabelType.Auto" ShowTodayButton="true" AllowEdit="false"> 

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

            </SfDatePicker> 

        </Content> 

 

    </DialogTemplates> 

 

</SfDialog> 

 

 

 

@code{ 

 

    public bool Visible { get; set; } = false; 

    protected SfDatePicker<DateTime?> DateObj1; 

 

 

    public void FocusHandler(Syncfusion.Blazor.Calendars.FocusEventArgs args) 

    { 

        if (Visible)   { 

            this.DateObj1.Show(); 

        } 

    } 

 

    public void ShowDialog() 

    { 

        Visible = true; 

    } 

 

    protected void OnOverlayclick(MouseEventArgs args) 

    { 

        Visible = false; 

 

    } 

 

    protected void DialogOpened(Syncfusion.Blazor.Popups.OpenEventArgs args) 

    { 

        args.PreventFocus = true; 

    } 

 

} 

 

 

Please let us know if the solution helps, 

 

Regards, 

Indrajith