select item on tab key for combobox and dropdownlist

0 Answers 615 Views
ComboBox DropDownList
Pranay
Top achievements
Rank 1
Pranay asked on 25 Aug 2021, 03:19 PM

Hi

Today, when Enter key is pressed highlighted item is selected. Can we please add same behavior for Tab key too.

 

Thank you.

Stefan
Telerik team
commented on 26 Aug 2021, 05:34 AM

Hello, Pranay,

In general, both the ComboBox and the DropDownList will select the item as soon as the user navigates to it. This means that it will be selected even before the tap is pressed.

Could you please share the steps and the expected result from them and I will see what we can offer for that use case?

Garry
Top achievements
Rank 1
commented on 08 Aug 2022, 11:00 AM

Hi Stefan

I know I'm reopening an old thread but we're seeing the same behaviour I think Pranay was talking about.

Say you have a combox box where one of the items is Portsmouth and there are no other entries beginning Portsm

Typing Portsm in and pressing enter will select Portsmouth from the list and update the text to read Portsmouth

Typing Portsm in and pressing Tab will not select Portsmouth and leaves the text saying Portsm
Vessy
Telerik team
commented on 10 Aug 2022, 09:11 AM

Hi Garry,

The described behavior is expected as by design pressing `Tab` does not trigger the selection of an item, but moves the focus to the next available element on the page. The selection change of the ComboBox will be triggered either if you:

  • press Enter after typing
  • type the full text of the item (making it the only option in the dropwdown) before pressing Tab
  • navigate to the item with the Arrow keys before pressing Tab
  • or selecting the item manually with the mouse pointer

You can test all options above in this stackblitz sample: //stackblitz.com/edit/react-mcgraw?file=app%2Fmain.jsx 

No answers yet. Maybe you can help?

Tags
ComboBox DropDownList
Asked by
Pranay
Top achievements
Rank 1
Share this question
or