Simple Combo tries to set an item's header as selection target

[jackofdiamond5]

Description

• igniteui-angular version: latest
• browser: n/a

Steps to reproduce

1. Run the dev samples
2. Go to the simple combo with groups enabled
3. Enter ariz as a filter term, or just enter any value that will result in at least one match.
4. Press ArrowDown
5. Press ArrowUp
6. Press Enter
7. Observe

Result

Mount is entered in the combo's input as a selection. Which is the element's group's header name.

Expected result

Either return focus to the input to allow the user to change the filter (and close the dropdown) or select Arizona / the first match that is found.

Attachment

Additional info

This happens because after step 5 the combo's dropdown will have focusedItem to be the first element in the dropdown which happens to be a header element. Then on Enter that element is used when trying to set the combo's value. As this element is not part of the data set it will be immediately rejected / the combo clears on blur even if the input is populated with the element / the element's id.

From a user's perspective the combo is in an edit state and expects the filter to be either edited or applied. If the former scenario is assumed, the combo should just close the dropdown and allow the user to continue editing since the input will be in focus. If the latter scenario is assumed, Enter should result in Arizona being set as the combo's value.

[georgianastasov]

After discussions with the design team, we have agreed on the following approach to address the issue:

Upon pressing ArrowUp to select an item and then pressing Enter:

• Instead of selecting the last item (group header), the input should retain the entered text.
• Focus should remain on the input field to allow users to continue filtering.
• The dropdown should remain open, displaying the filtered results based on the entered text.

Also, this behavior should be applied consistently across the normal default scenario of the igx-simple component, even when there are no group headers.

This adjustment aims to enhance usability by ensuring that the input behavior aligns with user expectations, facilitating seamless filtering and selection interactions.