How to close the keyboard when an item is selected from the dropdown in the .NET MAUI ComboBox (SfComboBox)?

This article illustrates how to close the keyboard when selecting an item from the dropdown in the .NET MAUI SfComboBox. To achieve this, please follow the steps below:

Step 1: Install and Register the CommunityToolKit.Maui

Install the CommunityToolkit.Maui package from the Manage NuGet Packages. After installing it, register the UseMauiCommunityToolkit method in the MauiProgram class for proper functionality, as demonstrated in the code sample below.

MauiProgram.cs

using CommunityToolkit.Maui;
using Syncfusion.Maui.Core.Hosting;
using Microsoft.Extensions.Logging;

namespace SfComboBoxSample;

public static class MauiProgram
{
   public static MauiApp CreateMauiApp()
   {
   	var builder = MauiApp.CreateBuilder();
   	builder
   		.UseMauiApp<app>()
   		.ConfigureSyncfusionCore()
   		.UseMauiCommunityToolkit()
   		.ConfigureFonts(fonts =>
   		{
   			fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
   			fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
   		});

#if DEBUG
   	builder.Logging.AddDebug();
#endif

   	return builder.Build();
   }
}

Step 2: Create the ComboBox control in the XAML

In the XAML layout, populate the ComboBox with items using ItemSource and invoke the SelectionChanged event.

Xaml

   <StackLayout WidthRequest="300" Spacing="20">
       <inputs:SfComboBox x:Name="comboBox" 
                          HeightRequest="40" 
                          IsEditable="True"
                          SelectionChanged="comboBox_SelectionChanged"
                          BackgroundColor="White">
           <inputs:SfComboBox.ItemsSource>
               <x:Array Type="{x:Type x:String}">
                   <x:String>United States</x:String>
                   <x:String>India</x:String>
                   <x:String>France</x:String>
                   <x:String>Italy</x:String>
                   <x:String>Germany</x:String>
                   <x:String>China</x:String>
               </x:Array>
           </inputs:SfComboBox.ItemsSource>
       </inputs:SfComboBox>
   </StackLayout>

Step 3: Configure the Keyboard method in the Xaml.cs file

Implement the HideKeyboardAsync method from the CommunityToolkit.Maui library within the SelectionChanged event method of SfComboBox. This method aids in closing the keyboard when an item is selected from the dropdown in the .NET MAUI SfComboBox, as illustrated in the following code sample.

Xaml.cs

   private async void comboBox_SelectionChanged(object sender, Syncfusion.Maui.Inputs.SelectionChangedEventArgs e)
   {
       var inputView = comboBox.Children[1];
       if (KeyboardExtensions.IsSoftKeyboardShowing((ITextInput)inputView))
       {
           await Task.Delay(200);
           await (inputView as Entry).HideKeyboardAsync(default);
       }

   }

Output:

Conclusion
I hope you enjoyed learning how to close the keyboard when an item is selected from the dropdown in the .NET MAUI SfComboBox.

Refer to our .NET MAUI SfComboBox feature tour page to learn about its other groundbreaking feature representations. You can explore our .NET MAUI ComboBox documentation to understand how to present and manipulate data.

For current customers, check out our .NET MAUI components from the License and download page. If you are new to Syncfusion, try our 30-day free trial to check out our .NET MAUI ComboBox and other .NET MAUI components.

Please let us know in the following comments section if you have any queries or require clarifications. You can also contact us through our support forums,Direct - Trac, or feedback portal. We are always happy to assist you!