1. Home
  2. Forum
  3. Blazor
  4. SfTimePicker in PopupContent of SfDropDownButton closes popup

SfTimePicker in PopupContent of SfDropDownButton closes popup

I have a SfDropDownButton where I placed a SfTimePicker in the PopupContent

<SfDropDownButton Content="@Operation.DisplayText">

    <PopupContent>

        <div class="popup-border">

        <SfTimePicker TValue="DateTime?" @bind-Value="@StartTime" Format="HH:mm:ss" />

        </div>

    </PopupContent>

</SfDropDownButton>

When ever I open the TimePicker drop down and select a time value, the SfDropDownButton popup closes and the value is not changed.
The same happens withSfDateTimePicker. So I assume any drop down component put in a drop down might cause this?
Strange thing is that I think it worked at first, and then it did consistently not work anymore.
Is there any way I can prevent the inner popup closing the outer popup?
I'm using V18.4.0.35.
Regards,
Reinhard.

4 Replies 1 reply marked as answer
RO Reinhard Ostermeier February 3, 2021 10:04 AM UTC

Some additional information:
I also have an SfDropDownButton with menu items on the same popup. This one does not close the outer popup.
So it might only be related to time and datetime picker.

I also found out that if I:
  1. Open the outer popup
  2. Open and close the SfDropDownButton that is also located on the outer popup
  3. Open the time/DateTime picker and select a different value
Then the outer popup is not closed

But when I:
  1. Open the outer popup
  2. Open the time/DateTime picker and select a different value
Then the outer popup is closed

AS Aravinthan Seetharaman Syncfusion Team February 4, 2021 01:07 PM UTC

Hi Reinhard, 
 
Thanks for contacting Syncfusion Support. 
 
We have checked the reported query. If we are using PopupContent Template, then we need to handle popup open and close events. For your reference we have provided code snippets and sample here. 
 
 
@using Syncfusion.Blazor.SplitButtons 
@using Syncfusion.Blazor.Calendars 
<SfDropDownButton CssClass="e-caret-hide" Content="Show"> 
    <PopupContent> 
        <div> 
            <SfTimePicker TValue="DateTime?" Format="HH:mm:ss" @bind-Value="@dateTime"> 
                <TimePickerEvents TValue="DateTime?" OnOpen="OpenPopup" OnClose="beforeClose"></TimePickerEvents> 
            </SfTimePicker> 
        </div> 
    </PopupContent> 
    <ChildContent> 
        <DropDownButtonEvents OnClose="popupClose"></DropDownButtonEvents> 
    </ChildContent> 
</SfDropDownButton> 
<p class="customCss">@dateTime</p> 
@code { 
    private DateTime? dateTime; 
    private bool ispopUp = false; 
 
    private void popupClose(BeforeOpenCloseMenuEventArgs args) 
    { 
        args.Cancel = this.ispopUp; 
    } 
 
    private void OpenPopup(PopupEventArgs args) 
    { 
        this.ispopUp = true; 
    } 
 
    private void beforeClose(PopupEventArgs args) 
    { 
        this.ispopUp = false; 
    } 
} 
 
 
 
Could you please check the above details and get back to us, if you need assistance on this. 
 
Regards, 
Aravinthan S 


Marked as answer
RO Reinhard Ostermeier February 5, 2021 02:12 PM UTC

Hello,

I have tested your proposed solution and it works perfect.

Thank you a lot.

Regards,
Reinhard.

AS Aravinthan Seetharaman Syncfusion Team February 7, 2021 02:17 PM UTC

Hi Reinhard, 
 
Thanks for the update.  
 
We are happy to hear that your issue has been resolved. Please feel free to contact us if you need any further assistance on this. 
 
Regards, 
Aravinthan S 


Loader.
Up arrow icon