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

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

@@ -36,7 +36,12 @@ import {
   ViewContainerRef,
 } from '@angular/core';
 import {ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms';
-import {MatOption, MatOptionSelectionChange} from '@angular/material/core';
+import {
+  MatOption,
+  MatOptionSelectionChange,
+  _getOptionScrollPosition,
+  _countGroupLabelsBeforeOption,
+} from '@angular/material/core';
 import {MatFormField} from '@angular/material/form-field';
 import {DOCUMENT} from '@angular/common';
 import {Observable} from 'rxjs/Observable';
@@ -377,20 +382,18 @@ 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 = _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 = _getOptionScrollPosition(
+      index + labelCount,
+      AUTOCOMPLETE_OPTION_HEIGHT,
+      this.autocomplete._getScrollTop(),
+      AUTOCOMPLETE_PANEL_HEIGHT
+    );
+
+    this.autocomplete._setScrollTop(newScrollPosition);
   }
 
   /**

src/lib/core/option/option.ts

@@ -246,31 +246,55 @@ export class MatOption implements AfterViewChecked {
   private _emitSelectionChangeEvent(isUserInput = false): void {
     this.onSelectionChange.emit(new MatOptionSelectionChange(this, isUserInput));
   }
+}
 
-  /**
-   * Counts the amount of option group labels that precede the specified option.
-   * @param optionIndex Index of the option at which to start counting.
-   * @param options Flat list of all of the options.
-   * @param optionGroups Flat list of all of the option groups.
-   */
-  static countGroupLabelsBeforeOption(optionIndex: number, options: QueryList<MatOption>,
-    optionGroups: QueryList<MatOptgroup>): number {
-
-    if (optionGroups.length) {
-      let optionsArray = options.toArray();
-      let groups = optionGroups.toArray();
-      let groupCounter = 0;
-
-      for (let i = 0; i < optionIndex + 1; i++) {
-        if (optionsArray[i].group && optionsArray[i].group === groups[groupCounter]) {
-          groupCounter++;
-        }
-      }
+/**
+ * Counts the amount of option group labels that precede the specified option.
+ * @param optionIndex Index of the option at which to start counting.
+ * @param options Flat list of all of the options.
+ * @param optionGroups Flat list of all of the option groups.
+ * @docs-private
+ */
+export function _countGroupLabelsBeforeOption(optionIndex: number, options: QueryList<MatOption>,
+  optionGroups: QueryList<MatOptgroup>): number {
+
+  if (optionGroups.length) {
+    let optionsArray = options.toArray();
+    let groups = optionGroups.toArray();
+    let groupCounter = 0;
 
-      return groupCounter;
+    for (let i = 0; i < optionIndex + 1; i++) {
+      if (optionsArray[i].group && optionsArray[i].group === groups[groupCounter]) {
+        groupCounter++;
+      }
     }
 
-    return 0;
+    return groupCounter;
+  }
+
+  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.
+ * @docs-private
+ */
+export function _getOptionScrollPosition(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

@@ -80,6 +80,8 @@ import {
   MAT_OPTION_PARENT_COMPONENT,
   mixinDisableRipple,
   CanDisableRipple,
+  _countGroupLabelsBeforeOption,
+  _getOptionScrollPosition,
 } from '@angular/material/core';
 import {MatFormField, MatFormFieldControl} from '@angular/material/form-field';
 import {Observable} from 'rxjs/Observable';
@@ -971,19 +973,16 @@ 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);
-    }
+    const labelCount = _countGroupLabelsBeforeOption(activeOptionIndex, this.options,
+        this.optionGroups);
+
+    this.panel.nativeElement.scrollTop = _getOptionScrollPosition(
+      activeOptionIndex + labelCount,
+      this._getItemHeight(),
+      this.panel.nativeElement.scrollTop,
+      SELECT_PANEL_MAX_HEIGHT
+    );
   }
 
   /** Focuses the select element. */
@@ -1012,8 +1011,8 @@ export class MatSelect extends _MatSelectMixinBase implements AfterContentInit,
     let selectedOptionOffset =
         this.empty ? 0 : this._getOptionIndex(this._selectionModel.selected[0])!;
 
-    selectedOptionOffset += MatOption.countGroupLabelsBeforeOption(selectedOptionOffset,
-        this.options, this.optionGroups);
+    selectedOptionOffset += _countGroupLabelsBeforeOption(selectedOptionOffset, this.options,
+        this.optionGroups);
 
     // We must maintain a scroll buffer so the selected option will be scrolled to the
     // center of the overlay panel rather than the top.