Selection in ComboBox

8 Nov 202424 minutes to read

Get selected value

Get the selected value of the ComboBox component in the ValueChange event using the ChangeEventArgs.Value property.

CSHTML

@using Syncfusion.Blazor.DropDowns

<SfComboBox TValue="string" TItem="Games" Placeholder="Select a game" DataSource="@LocalData">
    <ComboBoxFieldSettings Value="Text" Text="Text"></ComboBoxFieldSettings>
    <ComboBoxEvents TValue="string" TItem="Games" ValueChange="OnValueChange"></ComboBoxEvents>
</SfComboBox>

@code {
    public class Games
    {
        public string ID { get; set; }
        public string Text { get; set; }
    }
    List<Games> LocalData = new List<Games> {
        new Games() { ID= "Game1", Text= "American Football" },
        new Games() { ID= "Game2", Text= "Badminton" },
        new Games() { ID= "Game3", Text= "Basketball" },
        new Games() { ID= "Game4", Text= "Cricket" },
        new Games() { ID= "Game5", Text= "Football" },
        new Games() { ID= "Game6", Text= "Golf" },
        new Games() { ID= "Game7", Text= "Hockey" },
        new Games() { ID= "Game8", Text= "Rugby"},
        new Games() { ID= "Game9", Text= "Snooker" },
        new Games() { ID= "Game10", Text= "Tennis"},
    };
    public void OnValueChange(ChangeEventArgs<string, Games> args)
    {
        Console.WriteLine("The ComboBox Value is: ", args.Value);
    }
}

Get the complete object list of the selected value in the ValueChange event using the ChangeEventArgs.ItemData property.

CSHTML

@using Syncfusion.Blazor.DropDowns

<SfComboBox TValue="string" TItem="Games" Placeholder="Select a game" DataSource="@LocalData">
    <ComboBoxFieldSettings Value="ID" Text="Text"></ComboBoxFieldSettings>
    <ComboBoxEvents TValue="string" TItem="Games" ValueChange="OnValueChange"></ComboBoxEvents>
</SfComboBox>

@code {
    public class Games
    {
        public string ID { get; set; }
        public string Text { get; set; }
    }
    List<Games> LocalData = new List<Games> {
        new Games() { ID= "Game1", Text= "American Football" },
        new Games() { ID= "Game2", Text= "Badminton" },
        new Games() { ID= "Game3", Text= "Basketball" },
        new Games() { ID= "Game4", Text= "Cricket" },
        new Games() { ID= "Game5", Text= "Football" },
        new Games() { ID= "Game6", Text= "Golf" },
        new Games() { ID= "Game7", Text= "Hockey" },
        new Games() { ID= "Game8", Text= "Rugby"},
        new Games() { ID= "Game9", Text= "Snooker" },
        new Games() { ID= "Game10", Text= "Tennis"},
    };
    public void OnValueChange(ChangeEventArgs<string, Games> args)
    {
        Console.WriteLine("The complete data of the selected value is: ", args.ItemData);
    }
}

Preselected value on OnInitializedAsync

Bind the pre-selected value to the ComboBox component using the @bind-Value attribute. Assign the value property inside the OnInitializedAsync lifecycle. The following sample shows how to bind the value on the initial rendering of the component.

CSHTML

@using Syncfusion.Blazor.DropDowns

<SfComboBox TValue="string" TItem="Games" Width="300px" Placeholder="Select a game" DataSource="@LocalData" @bind-Value="comboBoxValue">
    <ComboBoxFieldSettings Value="ID" Text="Game"></ComboBoxFieldSettings>
</SfComboBox>

@code {
    public string comboBoxValue { get; set; }

    public class Games
    {
        public string ID { get; set; }
        public string Game { get; set; }
    }
    List<Games> LocalData = new List<Games> {
        new Games() { ID= "Game1", Game= "American Football" },
        new Games() { ID= "Game2", Game= "Badminton" },
        new Games() { ID= "Game3", Game= "Basketball" },
        new Games() { ID= "Game4", Game= "Cricket" },
        new Games() { ID= "Game5", Game= "Football" },
        new Games() { ID= "Game6", Game= "Golf" },
        new Games() { ID= "Game7", Game= "Hockey" },
        new Games() { ID= "Game8", Game= "Rugby"},
        new Games() { ID= "Game9", Game= "Snooker" },
        new Games() { ID= "Game10", Game= "Tennis"},
    };
    protected override async Task OnInitializedAsync()
    {
        comboBoxValue = "Game4";
    }
}

Programmatically change the selected value

Change the component value programmatically or externally by the component instance using the @ref attribute of the component. The following sample shows how to change the value of the component using click event of the button component.

CSHTML

@using Syncfusion.Blazor.DropDowns
@using Syncfusion.Blazor.Buttons

<div>
    <SfComboBox TValue="string" TItem="Games" Width="300px" Placeholder="Select a game" DataSource="@LocalData" @bind-Value="comboValue">
        <ComboBoxFieldSettings Value="ID" Text="Game"></ComboBoxFieldSettings>
    </SfComboBox>
</div>
<div>
    <SfButton Content="Click to change the value" OnClick="OnBtnClick"></SfButton>
</div>

@code {
    public string comboValue { get; set; } = "Game10";

    public class Games
    {
        public string ID { get; set; }
        public string Game { get; set; }
    }
    List<Games> LocalData = new List<Games> {
        new Games() { ID= "Game1", Game= "American Football" },
        new Games() { ID= "Game2", Game= "Badminton" },
        new Games() { ID= "Game3", Game= "Basketball" },
        new Games() { ID= "Game4", Game= "Cricket" },
        new Games() { ID= "Game5", Game= "Football" },
        new Games() { ID= "Game6", Game= "Golf" },
        new Games() { ID= "Game7", Game= "Hockey" },
        new Games() { ID= "Game8", Game= "Rugby"},
        new Games() { ID= "Game9", Game= "Snooker" },
        new Games() { ID= "Game10", Game= "Tennis"},
    };
    public void OnBtnClick()
    {
        comboValue = "Game4";
    }
}

ValueChange event

The ValueChange event is triggered when the value of the ComboBox component get changed or modified. Also, it will return the necessary arguments including the current and previously selected or changed value.

CSHTML

@using Syncfusion.Blazor.DropDowns

<SfComboBox ID="combobox" TValue="string" TItem="Countries" Placeholder="e.g. Australia" DataSource="@Country">
    <ComboBoxFieldSettings Text="Name" Value="Code"></ComboBoxFieldSettings>
    <ComboBoxEvents TValue="string" TItem="Countries" ValueChange="ChangeCountry"></ComboBoxEvents>
</SfComboBox>

@code {
    public class Countries
    {
        public string Name { get; set; }

        public string Code { get; set; }
    }

    List<Countries> Country = new List<Countries>
    {
        new Countries() { Name = "Australia", Code = "AU" },
        new Countries() { Name = "Bermuda", Code = "BM" },
        new Countries() { Name = "Canada", Code = "CA" },
        new Countries() { Name = "Cameroon", Code = "CM" },
        new Countries() { Name = "Denmark", Code = "DK" },
        new Countries() { Name = "France", Code = "FR" },
        new Countries() { Name = "Finland", Code = "FI" },
        new Countries() { Name = "Germany", Code = "DE" },
        new Countries() { Name = "Greenland", Code = "GL" },
        new Countries() { Name = "Hong Kong", Code = "HK" },
        new Countries() { Name = "India", Code = "IN" },
        new Countries() { Name = "Italy", Code = "IT" },
        new Countries() { Name = "Japan", Code = "JP" },
        new Countries() { Name = "Mexico", Code = "MX" },
        new Countries() { Name = "Norway", Code = "NO" },
        new Countries() { Name = "Poland", Code = "PL" },
        new Countries() { Name = "Switzerland", Code = "CH" },
        new Countries() { Name = "United Kingdom", Code = "GB" },
        new Countries() { Name = "United States", Code = "US" },
    };

    public void ChangeCountry(ChangeEventArgs<string, Countries> args)
    {
        Console.WriteLine("ValueChange event has been triggered !!");
    }
}

OnValueSelect event

The OnValueSelect event is triggered when you select any value in the ComboBox component. Get the necessary arguments including the SelectEventArgs.ItemData. Also, prevent the selection of items by setting the SelectEventArgs.Cancel property as true provided by the event arguments.

CSHTML

@using Syncfusion.Blazor.DropDowns

<SfComboBox ID="combobox" TValue="string" TItem="Countries" Placeholder="e.g. Australia" DataSource="@Country">
    <ComboBoxFieldSettings Text="Name" Value="Code"></ComboBoxFieldSettings>
    <ComboBoxEvents TValue="string" TItem="Countries" OnValueSelect="SelectCountry"></ComboBoxEvents>
</SfComboBox>

@code {
    public class Countries
    {
        public string Name { get; set; }

        public string Code { get; set; }
    }

    List<Countries> Country = new List<Countries>
    {
        new Countries() { Name = "Australia", Code = "AU" },
        new Countries() { Name = "Bermuda", Code = "BM" },
        new Countries() { Name = "Canada", Code = "CA" },
        new Countries() { Name = "Cameroon", Code = "CM" },
        new Countries() { Name = "Denmark", Code = "DK" },
        new Countries() { Name = "France", Code = "FR" },
        new Countries() { Name = "Finland", Code = "FI" },
        new Countries() { Name = "Germany", Code = "DE" },
        new Countries() { Name = "Greenland", Code = "GL" },
        new Countries() { Name = "Hong Kong", Code = "HK" },
        new Countries() { Name = "India", Code = "IN" },
        new Countries() { Name = "Italy", Code = "IT" },
        new Countries() { Name = "Japan", Code = "JP" },
        new Countries() { Name = "Mexico", Code = "MX" },
        new Countries() { Name = "Norway", Code = "NO" },
        new Countries() { Name = "Poland", Code = "PL" },
        new Countries() { Name = "Switzerland", Code = "CH" },
        new Countries() { Name = "United Kingdom", Code = "GB" },
        new Countries() { Name = "United States", Code = "US" },
    };

    public void SelectCountry(SelectEventArgs<Countries> args)
    {
        Console.WriteLine("Select event has been triggered !!");
    }
}

Preselect value with index

Bind the pre-selected value to the component using the @bind-Index attribute. It binds the respective value present in the specified index position of the datasource.

NOTE

It will be dependent on the SortOrder type. It will bind the value to the component with the sorted data if the corresponding property is defined.

The following sample shows how to bind the index on the initial rendering.

CSHTML

@using Syncfusion.Blazor.DropDowns

<SfComboBox TValue="string" TItem="Games" Width="300px" Placeholder="Select a game" DataSource="@LocalData" @bind-Index="comboIndex">
    <ComboBoxFieldSettings Value="ID" Text="Game"></ComboBoxFieldSettings>
</SfComboBox>

@code {
    public int? comboIndex { get; set; } = 4;
    
    public class Games
    {
        public string ID { get; set; }
        public string Game { get; set; }
    }
    List<Games> LocalData = new List<Games> {
        new Games() { ID= "Game1", Game= "American Football" },
        new Games() { ID= "Game2", Game= "Badminton" },
        new Games() { ID= "Game3", Game= "Basketball" },
        new Games() { ID= "Game4", Game= "Cricket" },
        new Games() { ID= "Game5", Game= "Football" },
        new Games() { ID= "Game6", Game= "Golf" },
        new Games() { ID= "Game7", Game= "Hockey" },
        new Games() { ID= "Game8", Game= "Rugby"},
        new Games() { ID= "Game9", Game= "Snooker" },
        new Games() { ID= "Game10", Game= "Tennis"},
    };
}

Autofill the selected value

The Autofill property specifies whether the input field of the component automatically suggests and fills in the first matched item as the user types, based on the items in the component’s data source. If no matches are found, the input field will not be filled, and no action will occur. The default value of Autofill is false.

RAZOR

@using Syncfusion.Blazor.DropDowns


<SfComboBox TValue="string" TItem="Games" Autofill=true Placeholder="e.g. Basketball" DataSource="@GamesList">
    <ComboBoxFieldSettings Value="ID" Text="Game" />
</SfComboBox>

@code {

    public class Games
    {
        public string ID { get; set; }
        public string Game { get; set; }
    }

    List<Games> GamesList = new List<Games> {
        new Games() { ID= "Game1", Game= "American Football" },
        new Games() { ID= "Game2", Game= "Badminton" },
        new Games() { ID= "Game3", Game= "Basketball" },
        new Games() { ID= "Game4", Game= "Cricket" },
        new Games() { ID= "Game5", Game= "Football" },
        new Games() { ID= "Game6", Game= "Golf" },
        new Games() { ID= "Game7", Game= "Hockey" },
        new Games() { ID= "Game8", Game= "Rugby"},
        new Games() { ID= "Game9", Game= "Snooker" },
        new Games() { ID= "Game10", Game= "Tennis"},
    };

}

Get selected item by value

Get the entire object belonging to the value selected in the component using the GetDataByValue method.

CSHTML

@using Syncfusion.Blazor.DropDowns
@using Syncfusion.Blazor.Buttons

<div>
    <SfComboBox @ref="comboObj" TValue="string" TItem="Games" Width="300px" Placeholder="Select a game" @bind-Value="@comboBoxValue" DataSource="@LocalData">
        <ComboBoxFieldSettings Value="ID" Text="Game"></ComboBoxFieldSettings>
    </SfComboBox>
</div>
<div>
    <SfButton Content="Click to get the value" OnClick="OnBtnClick"></SfButton>
</div>

@code {
    public string comboBoxValue { get; set; }

    SfComboBox<string, Games> comboObj;

    public class Games
    {
        public string ID { get; set; }
        public string Game { get; set; }
    }

    List<Games> LocalData = new List<Games> {
        new Games() { ID= "Game1", Game= "American Football" },
        new Games() { ID= "Game2", Game= "Badminton" },
        new Games() { ID= "Game3", Game= "Basketball" },
        new Games() { ID= "Game4", Game= "Cricket" },
        new Games() { ID= "Game5", Game= "Football" },
        new Games() { ID= "Game6", Game= "Golf" },
        new Games() { ID= "Game7", Game= "Hockey" },
        new Games() { ID= "Game8", Game= "Rugby"},
        new Games() { ID= "Game9", Game= "Snooker" },
        new Games() { ID= "Game10", Game= "Tennis"},
    };

    public void OnBtnClick()
    {
        var DropDownValue = comboObj.GetDataByValue(comboBoxValue);
        Console.WriteLine(DropDownValue);
    }
}

Focus the next component on selection

Focus the component programmatically using the FocusAsync public method. It will set focus instantly to the ComboBox component when invoking it.

CSHTML

@using Syncfusion.Blazor.DropDowns
@using System.Threading

<h4>ComboBox A</h4>
<SfComboBox ID="combobox1" TValue="string" TItem="Countries" Placeholder="e.g. Australia" DataSource="@Country">
    <ComboBoxFieldSettings Text="Name" Value="Code"></ComboBoxFieldSettings>
    <ComboBoxEvents TValue="string" TItem="Countries" Closed="@(e => OnClose(e, ComboObj2))"></ComboBoxEvents>
</SfComboBox>
<h4>ComboBox B</h4>
<SfComboBox @ref="ComboObj2" ID="combobox2" TValue="string" TItem="Countries" Placeholder="e.g. Australia" DataSource="@Country">
    <ComboBoxFieldSettings Text="Name" Value="Code"></ComboBoxFieldSettings>
</SfComboBox>
@code {
    SfComboBox<string, Countries> ComboObj2;

    public class Countries
    {
        public string Name { get; set; }

        public string Code { get; set; }
    }

    List<Countries> Country = new List<Countries>
    {
        new Countries() { Name = "Australia", Code = "AU" },
        new Countries() { Name = "Bermuda", Code = "BM" },
        new Countries() { Name = "Canada", Code = "CA" },
        new Countries() { Name = "Cameroon", Code = "CM" },
        new Countries() { Name = "Denmark", Code = "DK" },
        new Countries() { Name = "France", Code = "FR" },
        new Countries() { Name = "Finland", Code = "FI" },
        new Countries() { Name = "Germany", Code = "DE" },
        new Countries() { Name = "Greenland", Code = "GL" },
        new Countries() { Name = "Hong Kong", Code = "HK" },
        new Countries() { Name = "India", Code = "IN" },
        new Countries() { Name = "Italy", Code = "IT" },
        new Countries() { Name = "Japan", Code = "JP" },
        new Countries() { Name = "Mexico", Code = "MX" },
        new Countries() { Name = "Norway", Code = "NO" },
        new Countries() { Name = "Poland", Code = "PL" },
        new Countries() { Name = "Switzerland", Code = "CH" },
        new Countries() { Name = "United Kingdom", Code = "GB" },
        new Countries() { Name = "United States", Code = "US" },
    };

    public async Task OnClose(ClosedEventArgs args, SfComboBox<string, Countries> componentRef)
    {
        Thread tread = new Thread(
             async () =>
             {
                 Thread.Sleep(5);
                 await componentRef.FocusAsync();
             }
          );
        tread.Start();
        await Task.CompletedTask;
    }
}

Programmatically clear the selected value

To clear the ComboBox value programmatically, use the ClearAsync method. This method clears out the selected values from the SfComboBox<TValue, TItem> component and sets the Value and Index properties to null.

CSHTML

@using Syncfusion.Blazor.DropDowns
@using Syncfusion.Blazor.Buttons

<div>
    <SfComboBox @ref="comboObj" TValue="string" TItem="Games" Width="300px" Placeholder="Select a game" DataSource="@LocalData" @bind-Value="comboValue">
        <ComboBoxFieldSettings Value="ID" Text="Game"></ComboBoxFieldSettings>
    </SfComboBox>
</div>

<div style="margin-top:10px">
    <SfButton Content="Clear the value" OnClick="CrearValue"></SfButton>
</div>


@code {
    
    SfComboBox<string, Games> comboObj;

    public string comboValue { get; set; } = "Tennis";

    public class Games
    {
        public string ID { get; set; }
        public string Game { get; set; }
    }

    List<Games> LocalData = new List<Games> {
        new Games() { ID= "Game1", Game= "American Football" },
        new Games() { ID= "Game2", Game= "Badminton" },
        new Games() { ID= "Game3", Game= "Basketball" },
        new Games() { ID= "Game4", Game= "Cricket" },
        new Games() { ID= "Game5", Game= "Football" },
        new Games() { ID= "Game6", Game= "Golf" },
        new Games() { ID= "Game7", Game= "Hockey" },
        new Games() { ID= "Game8", Game= "Rugby"},
        new Games() { ID= "Game9", Game= "Snooker" },
        new Games() { ID= "Game10",Game= "Tennis"},
    };

    public void CrearValue()
    {
        comboObj.ClearAsync();
    }
}

Prevent reload on form submit

To prevent the page from reloading when using the ComboBox component inside a form, you can specify the type of the button as “button” by utilizing the HTMLAttributes property. This will prevent the page from reloading when the button is clicked.

CSHTML

@using Syncfusion.Blazor.DropDowns;
@using Syncfusion.Blazor.Buttons;

<form>
    <div>
        <label class="example-label">Select a game</label>
        <SfComboBox TItem="GameFields" TValue="string" DataSource="@Games" Placeholder="Select a game">
            <ComboBoxFieldSettings Value="ID" Text="Text"></ComboBoxFieldSettings>
        </SfComboBox>
    </div>
    <div class="submit-btn">
        <SfButton HtmlAttributes="@TypeChange" IsPrimary="true">Submit</SfButton>
    </div>
</form>

@code {
    private Dictionary<string, object> TypeChange = new Dictionary<string, object>()
    {
        { "type", "button"}
    };

    public class GameFields
    {
        public string ID { get; set; }
        public string Text { get; set; }
    }

    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" },
     };
}

Programmatically trigger onChange event

Trigger the ValueChange event manually by using the instance (taken from @ref attribute) of the ComboBoxEvents. In the following example, the ValueChange event is invoked inside the Created event handler. As per the following code, it will trigger once the component is created or rendered on the page.

CSHTML

@using Syncfusion.Blazor.DropDowns
@using System.Threading


<SfComboBox ID="combobox" TValue="string" TItem="Countries" Placeholder="e.g. Australia" DataSource="@Country">
    <ComboBoxFieldSettings Text="Name" Value="Code"></ComboBoxFieldSettings>
    <ComboBoxEvents @ref="combObj" TValue="string" TItem="Countries" Created="onCreate" ValueChange="ChangeCountry"></ComboBoxEvents>
</SfComboBox>

@code {
    public class Countries
    {
        public string Name { get; set; }

        public string Code { get; set; }
    }

    List<Countries> Country = new List<Countries>
    {
        new Countries() { Name = "Australia", Code = "AU" },
        new Countries() { Name = "Bermuda", Code = "BM" },
        new Countries() { Name = "Canada", Code = "CA" },
        new Countries() { Name = "Cameroon", Code = "CM" },
        new Countries() { Name = "Denmark", Code = "DK" },
        new Countries() { Name = "France", Code = "FR" },
        new Countries() { Name = "Finland", Code = "FI" },
        new Countries() { Name = "Germany", Code = "DE" },
        new Countries() { Name = "Greenland", Code = "GL" },
        new Countries() { Name = "Hong Kong", Code = "HK" },
        new Countries() { Name = "India", Code = "IN" },
        new Countries() { Name = "Italy", Code = "IT" },
        new Countries() { Name = "Japan", Code = "JP" },
        new Countries() { Name = "Mexico", Code = "MX" },
        new Countries() { Name = "Norway", Code = "NO" },
        new Countries() { Name = "Poland", Code = "PL" },
        new Countries() { Name = "Switzerland", Code = "CH" },
        new Countries() { Name = "United Kingdom", Code = "GB" },
        new Countries() { Name = "United States", Code = "US" },
    };
    public ComboBoxEvents<string, Countries> combObj { get; set; }

    public void onCreate()
    {
        var args = new Syncfusion.Blazor.DropDowns.ChangeEventArgs<string, Countries>() { Value = "CM" };
        this.combObj.ValueChange.InvokeAsync(args);
    }
    public void ChangeCountry(ChangeEventArgs<string, Countries> args)
    {
        Console.WriteLine("Value has been changed!!");
    }
}

Programmatically focus in and focus out the component

In order to trigger the FocusAsync() and FocusOutAsync() methods using the instance of the combobox, you can use buttons. You can bind the click event of the button to the FocusAsync() and FocusOutAsync() methods. When the button is clicked, it triggers the corresponding method on the combobox.

RAZOR

@using Syncfusion.Blazor.DropDowns
@using Syncfusion.Blazor.Buttons

<button @onclick="Focus">Focus</button>

<button @onclick="FocusOut">FocusOut</button>

<SfComboBox @ref="ComboObj" TValue="string" TItem="Games" Placeholder="Select a game" DataSource="@LocalData" @bind-Value="@GameValue">
    <ComboBoxFieldSettings Value="ID" Text="Text"></ComboBoxFieldSettings>
</SfComboBox>

@code {
    SfComboBox<string, Games> ComboObj;

    public string GameValue { get; set; } = "American Football";

    public class Games
    {
        public string ID { get; set; }
        public string Text { get; set; }
    }

    List<Games> LocalData = new List<Games> {
        new Games() { ID= "Game1", Text= "American Football" },
        new Games() { ID= "Game2", Text= "Badminton" },
        new Games() { ID= "Game3", Text= "Basketball" },
        new Games() { ID= "Game4", Text= "Cricket" },
        new Games() { ID= "Game5", Text= "Football" },
        new Games() { ID= "Game6", Text= "Golf" },
        new Games() { ID= "Game7", Text= "Hockey" },
        new Games() { ID= "Game8", Text= "Rugby"},
        new Games() { ID= "Game9", Text= "Snooker" },
        new Games() { ID= "Game10", Text= "Tennis"},
    };

    public void Focus()
    {
        this.ComboObj.FocusAsync();
    }

    public void FocusOut()
    {
        this.ComboObj.FocusOutAsync();
    }

}

While focusing and focus out the following event get triggered.

Focus event

The Focus event will trigger when the component gets focused.

CSHTML

@using Syncfusion.Blazor.DropDowns

<SfComboBox ID="dropdown" TValue="string" TItem="Countries" Placeholder="e.g. Australia" DataSource="@Country">
    <ComboBoxFieldSettings Text="Name" Value="Code"></ComboBoxFieldSettings>
    <ComboBoxEvents TValue="string" TItem="Countries" Focus="OnFocus"></ComboBoxEvents>
</SfComboBox>

@code {
    public class Countries
    {
        public string Name { get; set; }

        public string Code { get; set; }
    }

    List<Countries> Country = new List<Countries>
    {
        new Countries() { Name = "Australia", Code = "AU" },
        new Countries() { Name = "Bermuda", Code = "BM" },
        new Countries() { Name = "Canada", Code = "CA" },
        new Countries() { Name = "Cameroon", Code = "CM" },
        new Countries() { Name = "Denmark", Code = "DK" },
        new Countries() { Name = "France", Code = "FR" },
        new Countries() { Name = "Finland", Code = "FI" },
        new Countries() { Name = "Germany", Code = "DE" },
        new Countries() { Name = "Greenland", Code = "GL" },
        new Countries() { Name = "Hong Kong", Code = "HK" },
        new Countries() { Name = "India", Code = "IN" },
        new Countries() { Name = "Italy", Code = "IT" },
        new Countries() { Name = "Japan", Code = "JP" },
        new Countries() { Name = "Mexico", Code = "MX" },
        new Countries() { Name = "Norway", Code = "NO" },
        new Countries() { Name = "Poland", Code = "PL" },
        new Countries() { Name = "Switzerland", Code = "CH" },
        new Countries() { Name = "United Kingdom", Code = "GB" },
        new Countries() { Name = "United States", Code = "US" },
    };

    public void OnFocus()
    {
        Console.WriteLine("Focus event has been triggered !!");
    }
}

Blur event

The Blur event will trigger when focus moves out from the component.

CSHTML

@using Syncfusion.Blazor.DropDowns

<SfComboBox ID="combobox" TValue="string" TItem="Countries" Placeholder="e.g. Australia" DataSource="@Country">
    <ComboBoxFieldSettings Text="Name" Value="Code"></ComboBoxFieldSettings>
    <ComboBoxEvents TValue="string" TItem="Countries" Blur="OnBlur"></ComboBoxEvents>
</SfComboBox>

@code {
    public class Countries
    {
        public string Name { get; set; }

        public string Code { get; set; }
    }

    List<Countries> Country = new List<Countries>
    {
        new Countries() { Name = "Australia", Code = "AU" },
        new Countries() { Name = "Bermuda", Code = "BM" },
        new Countries() { Name = "Canada", Code = "CA" },
        new Countries() { Name = "Cameroon", Code = "CM" },
        new Countries() { Name = "Denmark", Code = "DK" },
        new Countries() { Name = "France", Code = "FR" },
        new Countries() { Name = "Finland", Code = "FI" },
        new Countries() { Name = "Germany", Code = "DE" },
        new Countries() { Name = "Greenland", Code = "GL" },
        new Countries() { Name = "Hong Kong", Code = "HK" },
        new Countries() { Name = "India", Code = "IN" },
        new Countries() { Name = "Italy", Code = "IT" },
        new Countries() { Name = "Japan", Code = "JP" },
        new Countries() { Name = "Mexico", Code = "MX" },
        new Countries() { Name = "Norway", Code = "NO" },
        new Countries() { Name = "Poland", Code = "PL" },
        new Countries() { Name = "Switzerland", Code = "CH" },
        new Countries() { Name = "United Kingdom", Code = "GB" },
        new Countries() { Name = "United States", Code = "US" },
    };

    public void OnBlur()
    {
        Console.WriteLine("Blur event has been triggered !!");
    }
}