fix(material/autocomplete): error if keydown is dispatched too early (#22513)

Fixes an error that is thrown if a `keydown` event is dispatched before the autocomplete panel has been initialized.

Fixes #22511.

Author: crisbeto

src/material-experimental/mdc-autocomplete/autocomplete.spec.ts

@@ -2446,6 +2446,21 @@ describe('MDC-based MatAutocomplete', () => {
       expect(fixture.componentInstance.selectedValue).toBe(1337);
     }));
 
+    it('should not focus the option when DOWN key is pressed', fakeAsync(() => {
+      const fixture = createComponent(SimpleAutocomplete);
+      const input = fixture.debugElement.query(By.css('input'))!.nativeElement;
+      fixture.detectChanges();
+      const spy = spyOn(console, 'error');
+
+      dispatchKeyboardEvent(input, 'keydown', DOWN_ARROW);
+      dispatchKeyboardEvent(input, 'keydown', DOWN_ARROW);
+      fixture.detectChanges();
+
+      // Note: for some reason the error here gets logged using console.error, rather than being
+      // thrown, hence why we use a spy to assert against it, rather than `.not.toThrow`.
+      expect(spy).not.toHaveBeenCalled();
+    }));
+
   });
 
   it('should have correct width when opened', () => {

src/material/autocomplete/autocomplete-trigger.ts

@@ -737,7 +737,7 @@ export abstract class _MatAutocompleteTriggerBase implements ControlValueAccesso
       // scroll the list to the top. This is better UX than scrolling the list to the
       // top of the option, because it allows the user to read the top group's label.
       autocomplete._setScrollTop(0);
-    } else {
+    } else if (autocomplete.panel) {
       const option = autocomplete.options.toArray()[index];
 
       if (option) {

src/material/autocomplete/autocomplete.spec.ts

@@ -2443,6 +2443,21 @@ describe('MatAutocomplete', () => {
       expect(fixture.componentInstance.selectedValue).toBe(1337);
     }));
 
+    it('should not focus the option when DOWN key is pressed', fakeAsync(() => {
+      const fixture = createComponent(SimpleAutocomplete);
+      const input = fixture.debugElement.query(By.css('input'))!.nativeElement;
+      fixture.detectChanges();
+      const spy = spyOn(console, 'error');
+
+      dispatchKeyboardEvent(input, 'keydown', DOWN_ARROW);
+      dispatchKeyboardEvent(input, 'keydown', DOWN_ARROW);
+      fixture.detectChanges();
+
+      // Note: for some reason the error here gets logged using console.error, rather than being
+      // thrown, hence why we use a spy to assert against it, rather than `.not.toThrow`.
+      expect(spy).not.toHaveBeenCalled();
+    }));
+
   });
 
   it('should have correct width when opened', () => {