fix(autocomplete): top option group not scrolled into view when going…

… up (#16343)

Fixes the case where the user won't be able to see the top option group when reaching the first option via the arrow keys.

(cherry picked from commit f797cac)

src/material/autocomplete/autocomplete-trigger.ts

@@ -500,14 +500,21 @@ export class MatAutocompleteTrigger implements ControlValueAccessor, AfterViewIn
     const labelCount = _countGroupLabelsBeforeOption(index,
         this.autocomplete.options, this.autocomplete.optionGroups);
 
-    const newScrollPosition = _getOptionScrollPosition(
-      index + labelCount,
-      AUTOCOMPLETE_OPTION_HEIGHT,
-      this.autocomplete._getScrollTop(),
-      AUTOCOMPLETE_PANEL_HEIGHT
-    );
-
-    this.autocomplete._setScrollTop(newScrollPosition);
+    if (index === 0 && labelCount === 1) {
+      // If we've got one group label before the option and we're at the top option,
+      // 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.
+      this.autocomplete._setScrollTop(0);
+    } else {
+      const newScrollPosition = _getOptionScrollPosition(
+        index + labelCount,
+        AUTOCOMPLETE_OPTION_HEIGHT,
+        this.autocomplete._getScrollTop(),
+        AUTOCOMPLETE_PANEL_HEIGHT
+      );
+
+      this.autocomplete._setScrollTop(newScrollPosition);
+    }
   }
 
   /**

src/material/autocomplete/autocomplete.spec.ts

@@ -1323,6 +1323,28 @@ describe('MatAutocomplete', () => {
       expect(container.scrollTop)
           .toBe(96, 'Expected panel to scroll up when option is above panel.');
     }));
+
+    it('should scroll back to the top when reaching the first option with preceding group label',
+      fakeAsync(() => {
+        fixture.componentInstance.trigger._handleKeydown(DOWN_ARROW_EVENT);
+        tick();
+        fixture.detectChanges();
+        expect(container.scrollTop).toBe(0, 'Expected the panel not to scroll.');
+
+        // Press the down arrow five times.
+        [1, 2, 3, 4, 5].forEach(() => {
+          fixture.componentInstance.trigger._handleKeydown(DOWN_ARROW_EVENT);
+          tick();
+        });
+
+        // Press the up arrow five times.
+        [1, 2, 3, 4, 5].forEach(() => {
+          fixture.componentInstance.trigger._handleKeydown(UP_ARROW_EVENT);
+          tick();
+        });
+
+        expect(container.scrollTop).toBe(0, 'Expected panel to be scrolled to the top.');
+      }));
   });
 
   describe('aria', () => {