bug(mat-select): Keypress followed by tab before typeaheadDebounceInterval expires causes item to not be selected

[jcachat]

Is this a regression?

• [X] Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

14

Description

Prior to version 15, using the keyboard to pick an item in a mat-select followed (quickly) by tab would pick the item corresponding to the key. As of version 15, that is no longer happening. If the user tabs before the typeaheadDebounceInterval has elapsed, the mat-select is left unchanged. After a recent update to our application which upgraded Angular to version 15, this is causing issues with some users who were accustomed to being able to quickly populate a set of mat-selects via keyboard and tab.

I can workaround this issue on the specific form that is most affected by setting typeaheadDebounceInterval to a much smaller value. But we have this issue throughout our application. I'm not sure if it's safe to do that globally in the MatSelectConfig (it will take some time to figure out if that will impact anything in our app). I would prefer this be fixed to set the value as it did before version 15.

Reproduction

Steps to reproduce:

1. Go to the custom ErrorStateMatched example on the mat-select examples site: https://material.angular.io/components/select/examples#select-error-state-matcher
2. Use "v" or "i" to switch the selected item followed (quickly) by tab.

Expected Behavior

The item corresponding to the keypress should be selected

Actual Behavior

The item is not selected after tabbing

Environment

• Angular: 15+
• CDK/Material: 15+

[zarend]

Hello,

Thank you for providing reproduction steps and work-around. Does upgrading to version 17 fix this for you?

Best Regards,

Zach

[jcachat]

I don't know if version 17 changes anything. I do have plans to upgrade but I am not at a point in our dev cycle where I can do that right now (and it's not a painless upgrade so will take some time).

I assumed the main Angular docs site is on 17 but did not check that.

[crisbeto]

This is working as expected at the moment, see https://github.com/angular/components/pull/18797. It works this way, because we don't want the user tabbing into the select, pressing a key and then having the value change after they've moved their attention to something else.

[jcachat]

I'm sorry, but that does not sound right to me.

In my case, the user has specifically typed a key in order to select an item and then hit the tab key. The expectation by the user is that the item matching the keypress should be selected. That is how this used to work prior to version 15.

[jcachat]

Also - the issue you are referencing was fixed in version 9. The issue I am reporting here was introduced in version 15. It was working properly in version 14. Please re-read the issue I reported and compare to the one you are referencing. They are not related.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}