fix(select): highlighted option not updated if value is reset while closed (#17213)

Currently we support the same feature as the native `select` where users can change the value and the focused option while the panel is closed using the arrow keys. The problem is that if the user changes the selected option and the value gets reset, the active option doesn't get updated so next time they interact with the control, it'll pick up from the previous position. These changes add an extra call to reset the highlighted option if the value is reset.

Fixes #17212.

(cherry picked from commit d453d06)

Author: crisbeto

src/material/select/select.spec.ts

@@ -296,6 +296,34 @@ describe('MatSelect', () => {
           flush();
         }));
 
+        it('should go back to first option if value is reset after interacting using the' +
+          'arrow keys on a closed select', fakeAsync(() => {
+            const formControl = fixture.componentInstance.control;
+            const options = fixture.componentInstance.options.toArray();
+
+            expect(formControl.value).toBeFalsy('Expected no initial value.');
+
+            dispatchKeyboardEvent(select, 'keydown', DOWN_ARROW);
+            flush();
+
+            expect(options[0].selected).toBe(true, 'Expected first option to be selected.');
+            expect(formControl.value).toBe(options[0].value,
+                'Expected value from first option to have been set on the model.');
+
+            formControl.reset();
+            fixture.detectChanges();
+
+            expect(options[0].selected).toBe(false, 'Expected first option to be deselected.');
+            expect(formControl.value).toBeFalsy('Expected value to be reset.');
+
+            dispatchKeyboardEvent(select, 'keydown', DOWN_ARROW);
+            flush();
+
+            expect(options[0].selected).toBe(true, 'Expected first option to be selected again.');
+            expect(formControl.value).toBe(options[0].value,
+                'Expected value from first option to have been set on the model again.');
+        }));
+
         it('should select first/last options via the HOME/END keys on a closed select',
           fakeAsync(() => {
             const formControl = fixture.componentInstance.control;

src/material/select/select.ts

@@ -858,6 +858,10 @@ export class MatSelect extends _MatSelectMixinBase implements AfterContentInit,
       // mode, because we don't know what option the user interacted with last.
       if (correspondingOption) {
         this._keyManager.setActiveItem(correspondingOption);
+      } else if (!this.panelOpen) {
+        // Otherwise reset the highlighted option. Note that we only want to do this while
+        // closed, because doing it while open can shift the user's focus unnecessarily.
+        this._keyManager.setActiveItem(-1);
       }
     }