refactor(select,autocomplete): consolidate logic for scrolling options into view

Combines some duplicated logic for determining how to scroll an option into view into a single place so it's easier to maintain.

Author: crisbeto

src/lib/autocomplete/autocomplete-trigger.ts

@@ -374,20 +374,17 @@ export class MatAutocompleteTrigger implements ControlValueAccessor, OnDestroy {
    * not adjusted.
    */
   private _scrollToOption(): void {
-    const activeOptionIndex = this.autocomplete._keyManager.activeItemIndex || 0;
-    const labelCount = MatOption.countGroupLabelsBeforeOption(activeOptionIndex,
+    const index = this.autocomplete._keyManager.activeItemIndex || 0;
+    const labelCount = MatOption.countGroupLabelsBeforeOption(index,
         this.autocomplete.options, this.autocomplete.optionGroups);
-    const optionOffset = (activeOptionIndex + labelCount) * AUTOCOMPLETE_OPTION_HEIGHT;
-    const panelTop = this.autocomplete._getScrollTop();
-
-    if (optionOffset < panelTop) {
-      // Scroll up to reveal selected option scrolled above the panel top
-      this.autocomplete._setScrollTop(optionOffset);
-    } else if (optionOffset + AUTOCOMPLETE_OPTION_HEIGHT > panelTop + AUTOCOMPLETE_PANEL_HEIGHT) {
-      // Scroll down to reveal selected option scrolled below the panel bottom
-      const newScrollTop = optionOffset - AUTOCOMPLETE_PANEL_HEIGHT + AUTOCOMPLETE_OPTION_HEIGHT;
-      this.autocomplete._setScrollTop(Math.max(0, newScrollTop));
-    }
+
+    const newScrollPosition = MatOption.getScrollPosition(
+      index + labelCount,
+      AUTOCOMPLETE_OPTION_HEIGHT,
+      this.autocomplete._getScrollTop(),
+      AUTOCOMPLETE_PANEL_HEIGHT);
+
+    this.autocomplete._setScrollTop(newScrollPosition);
   }
 
   /**

src/lib/core/option/option.ts

@@ -273,4 +273,26 @@ export class MatOption implements AfterViewChecked {
     return 0;
   }
 
+  /**
+   * Determines the position to which to scroll a panel in order for an option to be into view.
+   * @param optionIndex Index of the option to be scrolled into the view.
+   * @param optionHeight Height of the options.
+   * @param currentScrollPosition Current scroll position of the panel.
+   * @param panelHeight Height of the panel.
+   */
+  static getScrollPosition(optionIndex: number, optionHeight: number, currentScrollPosition: number,
+    panelHeight: number): number {
+    const optionOffset = optionIndex * optionHeight;
+
+    if (optionOffset < currentScrollPosition) {
+      return optionOffset;
+    }
+
+    if (optionOffset + optionHeight > currentScrollPosition + panelHeight) {
+      return Math.max(0, optionOffset - panelHeight + optionHeight);
+    }
+
+    return currentScrollPosition;
+  }
+
 }

src/lib/select/select.ts

@@ -971,19 +971,15 @@ export class MatSelect extends _MatSelectMixinBase implements AfterContentInit,
 
   /** Scrolls the active option into view. */
   private _scrollActiveOptionIntoView(): void {
-    const itemHeight = this._getItemHeight();
     const activeOptionIndex = this._keyManager.activeItemIndex || 0;
     const labelCount = MatOption.countGroupLabelsBeforeOption(activeOptionIndex,
         this.options, this.optionGroups);
-    const scrollOffset = (activeOptionIndex + labelCount) * itemHeight;
-    const panelTop = this.panel.nativeElement.scrollTop;
-
-    if (scrollOffset < panelTop) {
-      this.panel.nativeElement.scrollTop = scrollOffset;
-    } else if (scrollOffset + itemHeight > panelTop + SELECT_PANEL_MAX_HEIGHT) {
-      this.panel.nativeElement.scrollTop =
-          Math.max(0, scrollOffset - SELECT_PANEL_MAX_HEIGHT + itemHeight);
-    }
+
+    this.panel.nativeElement.scrollTop = MatOption.getScrollPosition(
+      activeOptionIndex + labelCount,
+      this._getItemHeight(),
+      this.panel.nativeElement.scrollTop,
+      SELECT_PANEL_MAX_HEIGHT);
   }
 
   /** Focuses the select element. */