From 2537e3dfac6c03e53a640ce9e49d3e9fc6aff125 Mon Sep 17 00:00:00 2001 From: Dobrinka Yordanova Date: Fri, 10 Oct 2025 18:37:47 +0300 Subject: [PATCH 1/3] keyboard support for AutoComplete --- controls/autocomplete/keyboard-support.md | 36 +++++++++++++++++++++++ controls/autocomplete/overview.md | 3 +- controls/combobox/keyboard-support.md | 2 -- 3 files changed, 38 insertions(+), 3 deletions(-) create mode 100644 controls/autocomplete/keyboard-support.md diff --git a/controls/autocomplete/keyboard-support.md b/controls/autocomplete/keyboard-support.md new file mode 100644 index 00000000..8406827b --- /dev/null +++ b/controls/autocomplete/keyboard-support.md @@ -0,0 +1,36 @@ +--- +title: Keyboard Support +page_title: .NET MAUI AutoComplete Documentation - Keyboard Support for WinUI and MacCatalyst +description: Learn more about the available keyboard combinations as part of the supported Telerik UI for .NET MAUI AutoComplete accessibility standards. +position: 6 +slug: autocomplete-keyboard-support +--- + +# .NET MAUI AutoComplete Keyboard Support + +The [Telerik UI for .NET MAUI AutoComplete]({%slug autocomplete-overview%}) provides keyboard navigation support on `WinUI` and `MacCatalyst`. + +The following table lists the actions and keyboard combinations that are available in the AutoComplete: + +| Hotkey Combinations | Action | +| -------------------- | ------ | +| `Up Arrow` / `Down Arrow` | When the suggestion vie is opened, pressing Up/Down Arrows will change the highlighted item in the suggestion view list. | +| `Left Arrow` / `Right Arrow` | Pressing Left/Right Arrows will change the cursor position of the AutoComplete control. | +| `Enter` | Commits the selected item from the suggestion view and closes the suggestion view. | +| `Esc` | Takes effect only when the suggestion view is opened. It closes the suggestion view of the AutoComplete. | +| `Home` / `End` | Works only when `IsEditable` is `False`. When the suggestion view is opened pressing the Home/End keys will change the highlighted item to the first/last item. | +| `PageUp` / `PageDown` | When the suggestion view is opened pressing PageUp/PageDown will change the highlighted item. | +| `Tab` | Focuses the control and opens the suggestion view. | + + +## See Also + +- [Suggest Mode]({%slug autocomplete-suggest-mode%}) +- [Display Text]({%slug autocomplete-display-text-formatter%}) +- [Tokens Support]({%slug autocomplete-tokens-support%}) +- [Remote Search]({%slug autocomplete-remote-search%}) +- [Filtering]({%slug autocomplete-filtering%}) +- [Events]({%slug autocomplete-events%}) +- [Methods]({%slug autocomplete-methods%}) +- [Templates]({%slug autocomplete-custom-templates%}) +- [Styling]({%slug autocomplete-styling%}) diff --git a/controls/autocomplete/overview.md b/controls/autocomplete/overview.md index 6b32b61f..c8ceb1bc 100644 --- a/controls/autocomplete/overview.md +++ b/controls/autocomplete/overview.md @@ -25,7 +25,8 @@ The Telerik UI for .NET MAUI AutoComplete can automatically complete user input * [Suggestion view visibility]({%slug autocomplete-configuration%}#suggestionview-visibility)—AutoComplete provides the ability to hide the view with the suggestions. * [Suggestion view position]({%slug autocomplete-configuration%}#suggestionview-position)—AutoComplete gives you the option to specify whether the `SuggestionView` will be displayed—above or under the control. * [Highlight customization]({%slug autocomplete-styling%}#hightlight-customization)—You can customize the highlight color of the suggestion items. -* [Nested properties support]({%slug autocomplete-data-binding%})—This allows binding of a complex object to the `TextSearchPath` property. +* [Keyboard navigation]({%slug autocomplete-keyboard-support%}) support—Use keyboard keys for navigation in the .NET MAUI AutoComplete suggestion view. This feature is available on WinUI and MacCatalyst. +* * [Nested properties support]({%slug autocomplete-data-binding%})—This allows binding of a complex object to the `TextSearchPath` property. * [Styling options]({%slug autocomplete-styling%})—For changing the control's border brush and thickness, font options, suggestion item highlight text color and more. # Next Steps diff --git a/controls/combobox/keyboard-support.md b/controls/combobox/keyboard-support.md index 358891ca..b42a1cd4 100644 --- a/controls/combobox/keyboard-support.md +++ b/controls/combobox/keyboard-support.md @@ -10,8 +10,6 @@ slug: combobox-keyboard-support The [Telerik UI for .NET MAUI ComboBox]({%slug combobox-overview%}) provides keyboard navigation support on `WinUI` and `MacCatalyst`. ->important 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 | From 2090fa4b43b8bd00a85914cd851c6f58dd2a1fc4 Mon Sep 17 00:00:00 2001 From: Dobrinka Yordanova Date: Mon, 13 Oct 2025 18:57:51 +0300 Subject: [PATCH 2/3] address comments. --- controls/autocomplete/keyboard-support.md | 17 +++++++---------- controls/autocomplete/overview.md | 6 +++--- 2 files changed, 10 insertions(+), 13 deletions(-) diff --git a/controls/autocomplete/keyboard-support.md b/controls/autocomplete/keyboard-support.md index 8406827b..42a84765 100644 --- a/controls/autocomplete/keyboard-support.md +++ b/controls/autocomplete/keyboard-support.md @@ -1,6 +1,6 @@ --- title: Keyboard Support -page_title: .NET MAUI AutoComplete Documentation - Keyboard Support for WinUI and MacCatalyst +meta_title: .NET MAUI AutoComplete Documentation - Keyboard Support for WinUI and MacCatalyst description: Learn more about the available keyboard combinations as part of the supported Telerik UI for .NET MAUI AutoComplete accessibility standards. position: 6 slug: autocomplete-keyboard-support @@ -8,20 +8,17 @@ slug: autocomplete-keyboard-support # .NET MAUI AutoComplete Keyboard Support -The [Telerik UI for .NET MAUI AutoComplete]({%slug autocomplete-overview%}) provides keyboard navigation support on `WinUI` and `MacCatalyst`. +[Telerik UI for .NET MAUI AutoComplete]({%slug autocomplete-overview%}) provides keyboard navigation support on WinUI and Mac Catalyst. -The following table lists the actions and keyboard combinations that are available in the AutoComplete: +The following table lists the actions and keyboard combinations that are available in the AutoComplete control: | Hotkey Combinations | Action | | -------------------- | ------ | -| `Up Arrow` / `Down Arrow` | When the suggestion vie is opened, pressing Up/Down Arrows will change the highlighted item in the suggestion view list. | -| `Left Arrow` / `Right Arrow` | Pressing Left/Right Arrows will change the cursor position of the AutoComplete control. | -| `Enter` | Commits the selected item from the suggestion view and closes the suggestion view. | -| `Esc` | Takes effect only when the suggestion view is opened. It closes the suggestion view of the AutoComplete. | -| `Home` / `End` | Works only when `IsEditable` is `False`. When the suggestion view is opened pressing the Home/End keys will change the highlighted item to the first/last item. | -| `PageUp` / `PageDown` | When the suggestion view is opened pressing PageUp/PageDown will change the highlighted item. | | `Tab` | Focuses the control and opens the suggestion view. | - +| `Enter` | Commits the selected item from the suggestion view and closes the suggestion view. | +| `Esc` | Takes effect only when the suggestion view is opened. It closes the suggestion view of the AutoComplete control. | +| `Up Arrow` / `Down Arrow` | When the suggestion view is opened, pressing `Up/Down Arrows` changes the highlighted item in the suggestion view list. | +| `PageUp` / `PageDown` | When the suggestion view is opened, pressing `PageUp/PageDown` changes the highlighted item. `PageUp` navigates to the first item in the visible area, `PageDown` navigates to the last item in the visible area. | ## See Also diff --git a/controls/autocomplete/overview.md b/controls/autocomplete/overview.md index c8ceb1bc..1269e9be 100644 --- a/controls/autocomplete/overview.md +++ b/controls/autocomplete/overview.md @@ -1,6 +1,6 @@ --- title: Overview -page_title: .NET MAUI AutoComplete Documentation - Overview +meta_title: .NET MAUI AutoComplete Documentation - Overview description: "Check our "Overview" documentation article for Telerik AutoComplete for .NET MAUI" position: 0 slug: autocomplete-overview @@ -25,8 +25,8 @@ The Telerik UI for .NET MAUI AutoComplete can automatically complete user input * [Suggestion view visibility]({%slug autocomplete-configuration%}#suggestionview-visibility)—AutoComplete provides the ability to hide the view with the suggestions. * [Suggestion view position]({%slug autocomplete-configuration%}#suggestionview-position)—AutoComplete gives you the option to specify whether the `SuggestionView` will be displayed—above or under the control. * [Highlight customization]({%slug autocomplete-styling%}#hightlight-customization)—You can customize the highlight color of the suggestion items. -* [Keyboard navigation]({%slug autocomplete-keyboard-support%}) support—Use keyboard keys for navigation in the .NET MAUI AutoComplete suggestion view. This feature is available on WinUI and MacCatalyst. -* * [Nested properties support]({%slug autocomplete-data-binding%})—This allows binding of a complex object to the `TextSearchPath` property. +* [Keyboard navigation]({%slug autocomplete-keyboard-support%}) support—Use keyboard keys for navigation in the .NET MAUI AutoComplete suggestion view. This feature is available on WinUI and Mac Catalyst. +* [Nested properties support]({%slug autocomplete-data-binding%})—This allows binding of a complex object to the `TextSearchPath` property. * [Styling options]({%slug autocomplete-styling%})—For changing the control's border brush and thickness, font options, suggestion item highlight text color and more. # Next Steps From 322bcf8c08c2971690dfbf4c55a0b855ee9bd08c Mon Sep 17 00:00:00 2001 From: Dobrinka Yordanova Date: Tue, 14 Oct 2025 14:09:17 +0300 Subject: [PATCH 3/3] add new property related to keyboard navigation. --- controls/autocomplete/styling.md | 17 ++++++++++++----- 1 file changed, 12 insertions(+), 5 deletions(-) diff --git a/controls/autocomplete/styling.md b/controls/autocomplete/styling.md index 8647f524..51c78d3d 100644 --- a/controls/autocomplete/styling.md +++ b/controls/autocomplete/styling.md @@ -1,6 +1,7 @@ --- title: Styling page_title: .NET MAUI AutoComplete Documentation - Styling +meta_title: .NET MAUI AutoComplete Documentation - Styling description: Change the Telerik .NET MAUI AutoComplete look using its flexible styling API. position: 16 slug: autocomplete-styling @@ -10,11 +11,11 @@ slug: autocomplete-styling The Telerik UI for .NET MAUI AutoComplete control provides the following Style properties for customizing its look: -* `TextColor`(`Color`)—Defines the text color of the control. -* `PlaceholderColor`(`Color`)—Defines the color for the placeholder text. -* `Font Options`(`FontAttributes`, `FontFamily`, `FontSize`)—Defines the font options for the text of the AutoComplete. -* `BorderBrush`(`Brush`)—Defines the brush of the border around the control. -* `BorderThickness`(`Thickness`)—Defines the thickness of the border around the control. +* `TextColor` (`Color`)—Defines the text color of the control. +* `PlaceholderColor` (`Color`)—Defines the color for the placeholder text. +* `Font Options` (`FontAttributes`, `FontFamily`, `FontSize`)—Defines the font options for the text of the AutoComplete. +* `BorderBrush` (`Brush`)—Defines the brush of the border around the control. +* `BorderThickness` (`Thickness`)—Defines the thickness of the border around the control. * `ClearButtonStyle` (of type `Style` with target type `Telerik.Maui.Controls.RadTemplatedButton`)—Defines the style for the clear button. The AutoComplete control uses the [`RadTextInput`]({%slug entry-textinput%}) control internally. To style the input control (`RadTextInput`), use the `TextInputStyle` (of type `Style` with target type `Telerik.Maui.Controls.RadTextInput`). @@ -29,6 +30,12 @@ The following properties style the AutoComplete SuggestionView (the dropdown wit * `SuggestionViewBorderColor`(`Color`)—Defines the color of the SuggestionView border. * `SuggestionViewBorderThickness`—Defines the thickness of the border that surrounds the SuggestionView. * `SuggestionViewCornerRadius`—Defines the corner radius applied to the SuggestionView. + +## Suggestion Item Styling + +The following properties style the AutoComplete SuggestionItem (the item inside the dropdown with the suggestions): + +* `SuggestionItemStyle` (of type `Style` with target type `Telerik.Maui.Controls.RadCollectionViewItemView`)—Defines the style of the suggestion item. When using keyboard navigation, you can apply style for the currently focused item. Review the [CollectionView Visual States]({%slug collectionview-visual-states%}) article. * `SuggestionItemHighlightTextColor`—Defines the highlight color of the selection items. ### Example for AutoComplete Styling