How to Debug Popup Styling?

[Mike-E]

Hi Team Syncfusion,

I am attempting to implement a ComboBox as seen here, specifically with templates:

https://blazor.syncfusion.com/demos/combobox/template?theme=fluent

In my case, the template/styling is not rendering as expected.  I cannot seem to use F12/Developer Tools and select the HTML5 element because the popup disappears as soon as the window loses its focus.

I would like to debug this template and styling, but cannot at the present moment.  Do you have any suggestions on how I can "pin" or "lock" the popup so that it stays in place to debug?

Thank you for any assistance,

Michael

[Vinitha Jeyakumar]

Hi Mike,

You can use the OnClose event of ComboBox, which triggers before the popup get close if you set the Cancel argument as true, then the popup will remains opened. please check the code below,

Code snippet:

<SfComboBox TValue="string" TItem="EmployeeData" CssClass="template" Placeholder="e.g. Andrew Fuller" DataSource="@Data">                   

                <ComboBoxEvents TValue="string" TItem="EmployeeData" OnClose="close"></ComboBoxEvents>

 </SfComboBox>

@code {

    public void close(PopupEventArgs args)

    {

        args.Cancel = true;

    }
}

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/MultiselectServer885014538

API Link: https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ComboBoxEvents-2.html#Syncfusion_Blazor_DropDowns_ComboBoxEvents_2_OnClose

Regards,

Vinitha

[Mike-E]

Ah that is excellent Vinitha!  Thank you for that.  I should have thought of that. :)  I appreciate the time and assistance you have provided.

[UdhayaKumar Duraisamy]

Hi Mike,

We are glad that your requirement has been fulfilled on your end. We are always happy to assist you.

Regards,

Udhaya Kumar D