New to Telerik UI for .NET MAUIStart a free 30-day trial

Closing the DropDown of the ComboBox on Click Outside Its Bounds

Updated on Jul 22, 2025

Environment

ProductVersion
ComboBox for .NET MAUI6.6.0

Description

To close the DropDown of the ComboBox when the user clicks outside of the component's bounds, you can use a workaround that involves attaching a gesture recognizer to the parent layout or main layout in the page and setting the IsDropDownOpen property of the ComboBox to false.

Solution

Follow these steps to implement the workaround:

1. In your XAML code, locate the parent layout or main layout that contains the ComboBox. 2. Add a GestureRecognizer to the parent layout and subscribe to its Tapped event. For example:

XAML
<VerticalStackLayout>
    <VerticalStackLayout.GestureRecognizers>
        <TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped"/>
    </VerticalStackLayout.GestureRecognizers>
    <!-- Other controls and elements -->
</VerticalStackLayout>

3. In the event handler method, set the IsDropDownOpen property of the ComboBox to false. This will close the DropDown when someone clicks outside its boundaries. For example:

C#
private void TapGestureRecognizer_Tapped(object sender, TappedEventArgs e)
{
    this.comboBox.IsDropDownOpen = false;
}

Notes

  • This workaround is applicable to both Android and iOS platforms.
  • Make sure to replace comboBox with the actual name of your ComboBox control in the event handler method.

See Also