bug(MatSelect): When navigating with keyboard, sometimes the first press of the down arrow is "ignored"

Reproduction

The value of the first MatOption in a MatSelect must be null. Example:

<mat-select>
    <mat-option>--</mat-option>    //   <-------   Here
    <mat-option value="canine">Dog</mat-option>
    <mat-option value="feline">Cat</mat-option>
</mat-select>

• https://stackblitz.com/edit/angular-lyemh3?file=src%2Fapp%2Fselect-hint-error-example.html

Steps to reproduce:

1. Refresh development server
2. Tab to the MatSelect
3. Use the down arrow to make a selection
4. Notice that the very first press appears to be ignored

Expected Behavior

The first press of the arrow should select Dog.

Actual Behavior

The first press of the arrow appears to do nothing.

Environment

• Angular: 11.0.6
• CDK/Material: 11.0.3
• Browser(s): Chrome
• Operating System (e.g. Windows, macOS, Ubuntu): Windows

[JaxonWright]

The desired behavior for this is probably what the matNativeControl select element does. However, it seems silly to need to use a native select element to get this common behavior.

[AndiPerlitz]

Is there a workaround for this bug? When I create the selection values and put the first option as “Not Selected” with null as value in the selection list then the selected value is in fact exactly this value. But nevertheless it needs two arrow down presses to select the first option after this. I understand that the control uses null to reset the internal selection, but i think, if the selected value is an element that has the value null, it should be treated as if exactly this option was selected.

This option must be added to have the possibility to reset the select control with keyboard or mouse when there was an option selected before. When this option with the null value is missing from the select options then there is no way to set the control to “nothing selected”.

Will this issue be addressed in the near future or do we have to implement a workaround by ourselfes like adding a reset button to the selectbox and removing the null-entry from the option list?

A little sitenote to this bug: With this bug the behavior of this control is incosistent, when using the arrow keys to scroll through the available options. When first entering the control it needs two arrow downs to select the first visible option. But when going further down and up to the null option again it only needs one arrow down to select the first visible option again. So selecting null doesn’t really reset the control in the ui. This is a valid option there. It only resets the internal control, but without the possibility for the programmer to detect this fact. I don’t see a difference in the formcontrol in typescript code when the first option is selected or when the control is in the state where two key downs are needed to get to the first visible option.

Another site note: this bug doesn’t occur, when the null-option is not the first in the list. If this option is at the end of the select options then everything works fine. Also this bug doesn’t occur, when you select something, leave the field, go back to the field, select the null-value, leave the field and go back to the field. In this case one arrow key down is enough to select the first visible option. The possibility to set the control in this state when it is created would solve this issue.