fix(material/autocomplete): activate first enabled option with autoActiveFirstOption (#21513)

Currently the autocomplete trigger will activate the first option when `autoActiveFirstOption`,
no matter whether it is disabled. These changes use a different API which will allow us to
pick the first enabled option.

Fixes #21498.

Author: crisbeto

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

@@ -2013,6 +2013,21 @@ describe('MDC-based MatAutocomplete', () => {
           .toContain('mat-mdc-option-active', 'Expected first option to be highlighted.');
     }));
 
+    it('should skip to the next enabled option if the first one is disabled ' +
+      'when using `autoActiveFirstOption`', fakeAsync(() => {
+        const testComponent = fixture.componentInstance;
+        testComponent.trigger.autocomplete.autoActiveFirstOption = true;
+        testComponent.states[0].disabled = true;
+        testComponent.states[1].disabled = true;
+        testComponent.trigger.openPanel();
+        fixture.detectChanges();
+        zone.simulateZoneExit();
+        fixture.detectChanges();
+
+        expect(overlayContainerElement.querySelectorAll('mat-option')[2].classList)
+            .toContain('mat-mdc-option-active', 'Expected third option to be highlighted.');
+      }));
+
     it('should remove aria-activedescendant when panel is closed with autoActiveFirstOption',
       fakeAsync(() => {
         const input: HTMLElement = fixture.nativeElement.querySelector('input');
@@ -2763,7 +2778,8 @@ const SIMPLE_AUTOCOMPLETE_TEMPLATE = `
     <mat-option
       *ngFor="let state of filteredStates"
       [value]="state"
-      [style.height.px]="state.height">
+      [style.height.px]="state.height"
+      [disabled]="state.disabled">
       <span>{{ state.code }}: {{ state.name }}</span>
     </mat-option>
   </mat-autocomplete>
@@ -2790,7 +2806,7 @@ class SimpleAutocomplete implements OnDestroy {
   @ViewChild(MatFormField) formField: MatFormField;
   @ViewChildren(MatOption) options: QueryList<MatOption>;
 
-  states: {code: string, name: string, height?: number}[] = [
+  states: {code: string, name: string, height?: number, disabled?: boolean}[] = [
     {code: 'AL', name: 'Alabama'},
     {code: 'CA', name: 'California'},
     {code: 'FL', name: 'Florida'},

src/material/autocomplete/autocomplete-trigger.ts

@@ -717,7 +717,15 @@ export abstract class _MatAutocompleteTriggerBase implements ControlValueAccesso
    * correct options, or to 0 if the consumer opted into it.
    */
   private _resetActiveItem(): void {
-    this.autocomplete._keyManager.setActiveItem(this.autocomplete.autoActiveFirstOption ? 0 : -1);
+    const autocomplete = this.autocomplete;
+
+    if (autocomplete.autoActiveFirstOption) {
+      // Note that we go through `setFirstItemActive`, rather than `setActiveItem(0)`, because
+      // the former will find the next enabled option, if the first one is disabled.
+      autocomplete._keyManager.setFirstItemActive();
+    } else {
+      autocomplete._keyManager.setActiveItem(-1);
+    }
   }
 
   /** Determines whether the panel can be opened. */

src/material/autocomplete/autocomplete.spec.ts

@@ -1997,6 +1997,21 @@ describe('MatAutocomplete', () => {
           .toContain('mat-active', 'Expected first option to be highlighted.');
     }));
 
+    it('should skip to the next enabled option if the first one is disabled ' +
+      'when using `autoActiveFirstOption`', fakeAsync(() => {
+        const testComponent = fixture.componentInstance;
+        testComponent.trigger.autocomplete.autoActiveFirstOption = true;
+        testComponent.states[0].disabled = true;
+        testComponent.states[1].disabled = true;
+        testComponent.trigger.openPanel();
+        fixture.detectChanges();
+        zone.simulateZoneExit();
+        fixture.detectChanges();
+
+        expect(overlayContainerElement.querySelectorAll('mat-option')[2].classList)
+            .toContain('mat-active', 'Expected third option to be highlighted.');
+      }));
+
     it('should remove aria-activedescendant when panel is closed with autoActiveFirstOption',
       fakeAsync(() => {
         const input: HTMLElement = fixture.nativeElement.querySelector('input');
@@ -2760,7 +2775,8 @@ const SIMPLE_AUTOCOMPLETE_TEMPLATE = `
     <mat-option
       *ngFor="let state of filteredStates"
       [value]="state"
-      [style.height.px]="state.height">
+      [style.height.px]="state.height"
+      [disabled]="state.disabled">
       <span>{{ state.code }}: {{ state.name }}</span>
     </mat-option>
   </mat-autocomplete>
@@ -2787,7 +2803,7 @@ class SimpleAutocomplete implements OnDestroy {
   @ViewChild(MatFormField) formField: MatFormField;
   @ViewChildren(MatOption) options: QueryList<MatOption>;
 
-  states: {code: string, name: string, height?: number}[] = [
+  states: {code: string, name: string, height?: number, disabled?: boolean}[] = [
     {code: 'AL', name: 'Alabama'},
     {code: 'CA', name: 'California'},
     {code: 'FL', name: 'Florida'},