fix(select): lock dropdown position when scrolling (#9789)

This was the initial use-case for introducing the locked positioning to the `ConnectedPositionStrategy`. Since `mat-select` has some special positioning requirements, it would look weird if we kept repositioning it as the user scrolls. These changes add an input `CdkConnectedOverlay` that allows for the position to be locked and locks it for `mat-select`.

Author: crisbeto

src/cdk/overlay/overlay-directives.ts

@@ -97,6 +97,7 @@ export class CdkConnectedOverlay implements OnDestroy, OnChanges {
   private _overlayRef: OverlayRef;
   private _templatePortal: TemplatePortal;
   private _hasBackdrop = false;
+  private _lockPosition = false;
   private _backdropSubscription = Subscription.EMPTY;
   private _offsetX: number = 0;
   private _offsetY: number = 0;
@@ -155,6 +156,11 @@ export class CdkConnectedOverlay implements OnDestroy, OnChanges {
   get hasBackdrop() { return this._hasBackdrop; }
   set hasBackdrop(value: any) { this._hasBackdrop = coerceBooleanProperty(value); }
 
+  /** Whether or not the overlay should be locked when scrolling. */
+  @Input('cdkConnectedOverlayLockPosition')
+  get lockPosition() { return this._lockPosition; }
+  set lockPosition(value: any) { this._lockPosition = coerceBooleanProperty(value); }
+
   /**
    * @deprecated
    * @deletion-target 6.0.0
@@ -296,6 +302,10 @@ export class CdkConnectedOverlay implements OnDestroy, OnChanges {
         this._position.withPositions(this.positions);
       }
 
+      if (changes['lockPosition']) {
+        this._position.withLockedPosition(this.lockPosition);
+      }
+
       if (changes['origin'] || changes['_deprecatedOrigin']) {
         this._position.setOrigin(this.origin.elementRef);
 
@@ -359,7 +369,8 @@ export class CdkConnectedOverlay implements OnDestroy, OnChanges {
     const strategy = this._overlay.position()
       .connectedTo(this.origin.elementRef, originPoint, overlayPoint)
       .withOffsetX(this.offsetX)
-      .withOffsetY(this.offsetY);
+      .withOffsetY(this.offsetY)
+      .withLockedPosition(this.lockPosition);
 
     for (let i = 1; i < this.positions.length; i++) {
       strategy.withFallbackPosition(

src/lib/select/select.html

@@ -18,6 +18,7 @@
 <ng-template
   cdk-connected-overlay
   hasBackdrop
+  cdkConnectedOverlayLockPosition
   backdropClass="cdk-overlay-transparent-backdrop"
   [scrollStrategy]="_scrollStrategy"
   [origin]="origin"