How to prevent Dropdown Menu popup from closing when selecting item in ComboBox in Blazor?

Introduction

When rendering a SfComboBox inside the PopupContent of a SfDropDownButton, the popup closes when an item in the ComboBox is selected. This article will guide you through the process of preventing the PopupContent from closing upon selection, and how to close it programmatically when needed in Blazor Dropdown Menu component.

Handling popup close action

To prevent the PopupContent of the SfDropDownButton from closing when an item is selected in the SfComboBox, you can utilize the OnClose event of the SfDropDownButton and set the Cancel argument to true. This ensures the popup will remain open even after a selection is made.

Here is a code snippet demonstrating this approach:

<SfDropDownButton @ref="FileButton" Content="File" CssClass="e-dropDown-button">
    <ChildContent>
        <DropDownButtonEvents OnClose="@DropDownButtonClose"></DropDownButtonEvents>
    </ChildContent>
    <PopupContent>
        <SfComboBox TValue="string" TItem="Games" Placeholder="Select a game" DataSource="@LocalData">
            <ComboBoxFieldSettings Value="ID" Text="Text"></ComboBoxFieldSettings>
            <ComboBoxEvents TValue="string" TItem="Games" OnValueSelect="OnSelect" Blur="Blur"></ComboBoxEvents>
        </SfComboBox>
    </PopupContent>
</SfDropDownButton>

@code {
    private void DropDownButtonClose(BeforeOpenCloseMenuEventArgs args)
    {
        args.Cancel = true;
    }

    private void Blur()
    {
        FileButton.Toggle();
    }
}

Closing the SfDropDownButton programmatically

If you need to close the dropdown menu programmatically, you can call the Toggle method of the SfDropDownButton. In the example above, the
Blur event handler is used to trigger the Toggle method, which will close the dropdown.

Demo

To see a live demonstration of this functionality, visit the Syncfusion Blazor Playground using the following link: https://blazorplayground.syncfusion.com/htrptsVOIDZBswxV

Additional References

Syncfusion Blazor Documentation: https://blazor.syncfusion.com/documentation
Syncfusion Blazor Components: https://www.syncfusion.com/blazor-components
Syncfusion Blazor Demos: https://blazor.syncfusion.com/demos/

Remember to replace the TValue and TItem types, DataSource, and other properties with the actual data and types relevant to your application.

Conclusion

We hope you enjoyed learning about how to prevent Dropdown Menu popup from closing when selecting item in ComboBox in Blazor.

You can refer to our Blazor Dropdown Menu feature tour page to know about its other groundbreaking features, documentation, and how to quickly get started with configuration specifications. You can also explore our Blazor Dropdown Menu example to understand how to create and manipulate data.

For current customers, our Blazor components are available on the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to evaluate our Blazor DropDown Menu and other Blazor components.

If you have any questions or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, support portal, or feedback portal. We are always happy to assist you!

Did you find this information helpful?

Yes

Comments (0)