.NET MAUI ComboBox Keyboard Support
The Telerik UI for .NET MAUI ComboBox provides keyboard navigation support on WinUI
and MacCatalyst
.
Keyboard support is available only on .NET 8.0.
The following table lists the actions and keyboard combinations that are available in the ComboBox:
Hotkey Combinations | Action |
---|---|
F4 |
Shows the drop-down if it is closed. If the drop-down is opened pressing the F4 key will submit the selection and close the drop-down. |
Up Arrow / Down Arrow
|
If the drop-down is opened, pressing Up/Down Arrows will change the highlighted item in the drop-down list. If it is closed pressing Up/Down Arrows will change the SelectedItem. |
Left Arrow / Right Arrow
|
If the drop-down is opened, pressing Left/Right Arrows will change the highlighted item in the drop-down list. If it is closed pressing Left/Right Arrows will change the SelectedItem. They work only when IsEditable is False . |
Enter |
Takes effect only when the drop-down of the ComboBox is opened. Commits the selection and closes the drop-down. |
Esc |
Takes effect only when the drop-down is opened. It cancels the selection and closes the drop-down of the ComboBox.Esc key is not supported in MacOS when IsEditable is True . |
Home / End
|
Works only when IsEditable is False . When the drop-down is opened pressing the Home/End keys will change the highlighted item to the first/last item. If the drop-down is closed pressing the Home/End keys will change the selected item to the first/last item. |
PageUp / PageDown
|
Pressing any of these keys will open the drop-down when it is closed. If the drop-down is opened pressing PageUp/PageDown will change the highlighted item. |
On MacOS when
IsEditable
property of the ComboBox isTrue
,Command
key should be pressed to enable the previously described hotkeys.
To enable the keyboard support when the drop-down is opened and when setting the custom item and selected item templates in ComboBox for .NET MAUI, wrap the content of the templates in a RadComboBoxItem
. Define the necessary visual states of the RadComboBoxItem
, specifically MouseOver
and Highlighted
.
Here is a sample ComboBox definition in XAML:
<telerik:RadComboBox ItemsSource="{Binding Items}"
DisplayMemberPath="Name"
x:Name="combo"
Placeholder="Select City">
<telerik:RadComboBox.ItemTemplate>
<DataTemplate>
<telerik:RadComboBoxItem>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver">
<VisualState.Setters>
<Setter Property="telerik:RadComboBoxItem.BackgroundColor" Value="LightGray"/>
</VisualState.Setters>
</VisualState>
<VisualState Name="Highlighted">
<VisualState.Setters>
<Setter Property="telerik:RadComboBoxItem.BackgroundColor" Value="LightGray" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Label Text="{Binding Name}"
Padding="8, 7, 0, 7"
TextColor="Black"/>
</telerik:RadComboBoxItem>
</DataTemplate>
</telerik:RadComboBox.ItemTemplate>
<telerik:RadComboBox.SelectedItemTemplate>
<DataTemplate>
<telerik:RadComboBoxItem>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver">
<VisualState.Setters>
<Setter Property="telerik:RadComboBoxItem.BackgroundColor" Value="LightGray"/>
</VisualState.Setters>
</VisualState>
<VisualState Name="Highlighted">
<VisualState.Setters>
<Setter Property="telerik:RadComboBoxItem.BackgroundColor" Value="LightCoral" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<VerticalStackLayout>
<Label Text="{Binding Name}"
Padding="8, 7, 0, 7"
TextColor="Black"/>
<Label Text="{Binding Population}"
FontSize="12"
Padding="8, 7, 0, 7"/>
</VerticalStackLayout>
</telerik:RadComboBoxItem>
</DataTemplate>
</telerik:RadComboBox.SelectedItemTemplate>
</telerik:RadComboBox>