Customization in Blazor ComboBox

4 Nov 20251 minute to read

Open ComboBox dropdown on focus

Automatically open the ComboBox dropdown when the input receives focus by handling the Focus event and calling the ShowPopupAsync method (inherited from the base DropDownList). ShowPopupAsync programmatically opens the popup displaying the list of items.

@using Syncfusion.Blazor.DropDowns

<SfComboBox @ref=@popup TItem="GameFields" TValue="string" DataSource="@Games">
    <ComboBoxEvents TItem="GameFields" TValue="string" Focus="@FocusHandler"></ComboBoxEvents>
    <ComboBoxFieldSettings Text="Text" Value="ID"></ComboBoxFieldSettings>
</SfComboBox>

@code {
    public class GameFields
    {
        public string ID { get; set; }
        public string Text { get; set; }
    }
    SfComboBox<string, GameFields> popup;
    private List<GameFields> Games = new List<GameFields>() {
        new GameFields(){ ID= "Game1", Text= "American Football" },
        new GameFields(){ ID= "Game2", Text= "Badminton" },
        new GameFields(){ ID= "Game3", Text= "Basketball" },
        new GameFields(){ ID= "Game4", Text= "Cricket" },
     };

    private void FocusHandler()
    {
        popup.ShowPopupAsync();
       
    }
}