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

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.

Author: crisbeto

src/material/autocomplete/autocomplete-trigger.ts

@@ -481,14 +481,21 @@ export class MatAutocompleteTrigger implements ControlValueAccessor, OnChanges,
     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

@@ -1272,6 +1272,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', () => {