fix(autocomplete, filter-field): Fixes an issue with overlay

positioning. Switched the autocomplete and filterfield overlay to use the DtFlexibleConnectedPositionStrategy instead of the CDK FlexibleConnectedPositionStrategy. The Dt version can deal with the clusters page-ribbon component and in general deals with better with overlaying elements. Fixes #451
dynatrace-oss · Feb 5, 2020 · d3ec0d1 · d3ec0d1
1 parent 1da466c
commit d3ec0d1
Show file tree

Hide file tree

Showing 2 changed files with 80 additions and 15 deletions.
diff --git a/components/autocomplete/src/autocomplete-trigger.ts b/components/autocomplete/src/autocomplete-trigger.ts
@@ -23,11 +23,13 @@ import {
   UP_ARROW,
 } from '@angular/cdk/keycodes';
 import {
-  FlexibleConnectedPositionStrategy,
   Overlay,
   OverlayConfig,
   OverlayRef,
   PositionStrategy,
+  ViewportRuler,
+  OverlayContainer,
+  FlexibleConnectedPositionStrategy,
 } from '@angular/cdk/overlay';
 import { DOCUMENT } from '@angular/common';
 import {
@@ -75,12 +77,14 @@ import {
   isDefined,
   readKeyCode,
   stringify,
+  DtFlexibleConnectedPositionStrategy,
 } from '@dynatrace/barista-components/core';
 import { DtFormField } from '@dynatrace/barista-components/form-field';
 
 import { DtAutocomplete } from './autocomplete';
 import { getDtAutocompleteMissingPanelError } from './autocomplete-errors';
 import { DtAutocompleteOrigin } from './autocomplete-origin';
+import { Platform } from '@angular/cdk/platform';
 
 /** Provider that allows the autocomplete to register as a ControlValueAccessor. */
 export const DT_AUTOCOMPLETE_VALUE_ACCESSOR: Provider = {
@@ -229,8 +233,13 @@ export class DtAutocompleteTrigger<T>
    */
   private _canOpenOnNextFocus = true;
 
-  /** Strategy that is used to position the panel. */
-  private _positionStrategy: FlexibleConnectedPositionStrategy;
+  /**
+   * Strategy that is used to position the panel.
+   * @breaking-change Switch to only use DtFlexibleConnectedPositionStrategy with 7.0.0
+   */
+  private _positionStrategy:
+    | FlexibleConnectedPositionStrategy
+    | DtFlexibleConnectedPositionStrategy;
 
   /** Stream of keyboard events that can close the panel. */
   private readonly _closeKeyEventStream = new Subject<void>();
@@ -253,9 +262,15 @@ export class DtAutocompleteTrigger<T>
     private _changeDetectorRef: ChangeDetectorRef,
     private _viewportResizer: DtViewportResizer,
     private _zone: NgZone,
-    @Optional() @Host() private _formField: DtFormField<string>,
+    @Optional() @Host() private _formField?: DtFormField<string>,
     // tslint:disable-next-line:no-any
-    @Optional() @Inject(DOCUMENT) private _document: any,
+    @Optional() @Inject(DOCUMENT) private _document?: any,
+    /** @breaking-change 7.0.0 Make the _viewportRuler non optional. */
+    @Optional() private _viewportRuler?: ViewportRuler,
+    /** @breaking-change 7.0.0 Make the _platform non optional. */
+    @Optional() private _platform?: Platform,
+    /** @breaking-change 7.0.0 Make the _overlayContainer non optional. */
+    @Optional() private _overlayContainer?: OverlayContainer,
   ) {
     // tslint:disable-next-line:strict-type-predicates
     if (typeof window !== 'undefined') {
@@ -500,9 +515,24 @@ export class DtAutocompleteTrigger<T>
   }
 
   private _getOverlayPosition(): PositionStrategy {
-    this._positionStrategy = this._overlay
-      .position()
-      .flexibleConnectedTo(this._getConnectedElement())
+    /**
+     * @breaking-change Switch to only use the DtFlexibleConnectedPositionStrategy
+     * with 7.0.0
+     */
+    const originalPositionStrategy =
+      this._viewportRuler && this._platform && this._overlayContainer
+        ? new DtFlexibleConnectedPositionStrategy(
+            this._getConnectedElement(),
+            this._viewportRuler,
+            this._document,
+            this._platform,
+            this._overlayContainer,
+          )
+        : this._overlay
+            .position()
+            .flexibleConnectedTo(this._getConnectedElement());
+
+    this._positionStrategy = originalPositionStrategy
       .withFlexibleDimensions(false)
       .withPush(false)
       .withPositions([

diff --git a/components/filter-field/src/filter-field-range/filter-field-range-trigger.ts b/components/filter-field/src/filter-field-range/filter-field-range-trigger.ts
@@ -17,11 +17,13 @@
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
 import { ESCAPE, UP_ARROW } from '@angular/cdk/keycodes';
 import {
-  FlexibleConnectedPositionStrategy,
   Overlay,
   OverlayConfig,
   OverlayRef,
   PositionStrategy,
+  ViewportRuler,
+  OverlayContainer,
+  FlexibleConnectedPositionStrategy,
 } from '@angular/cdk/overlay';
 import {
   ChangeDetectorRef,
@@ -31,6 +33,8 @@ import {
   NgZone,
   OnDestroy,
   Renderer2,
+  Optional,
+  Inject,
 } from '@angular/core';
 import {
   EMPTY,
@@ -43,9 +47,14 @@ import {
 } from 'rxjs';
 import { filter, map, take } from 'rxjs/operators';
 
-import { readKeyCode } from '@dynatrace/barista-components/core';
+import {
+  readKeyCode,
+  DtFlexibleConnectedPositionStrategy,
+} from '@dynatrace/barista-components/core';
 
 import { DtFilterFieldRange } from './filter-field-range';
+import { Platform } from '@angular/cdk/platform';
+import { DOCUMENT } from '@angular/common';
 
 @Directive({
   selector: `input[dtFilterFieldRange]`,
@@ -115,8 +124,13 @@ export class DtFilterFieldRangeTrigger implements OnDestroy {
   /** Overlay Reference of the currently open overlay */
   private _overlayRef: OverlayRef | null;
 
-  /** Strategy that is used to position the panel. */
-  private _positionStrategy: FlexibleConnectedPositionStrategy;
+  /**
+   * Strategy that is used to position the panel.
+   * @breaking-change Switch to only use DtFlexibleConnectedPositionStrategy with 7.0.0
+   */
+  private _positionStrategy:
+    | FlexibleConnectedPositionStrategy
+    | DtFlexibleConnectedPositionStrategy;
 
   /** Whether the component has already been destroyed */
   private _componentDestroyed = false;
@@ -139,6 +153,15 @@ export class DtFilterFieldRangeTrigger implements OnDestroy {
     private _changeDetectorRef: ChangeDetectorRef,
     zone: NgZone,
     renderer: Renderer2,
+    /** @breaking-change 7.0.0 Make the _viewportRuler non-optional. */
+    @Optional() private _viewportRuler?: ViewportRuler,
+    /** @breaking-change 7.0.0 Make the _platform non-optional. */
+    @Optional() private _platform?: Platform,
+    /** @breaking-change 7.0.0 Make the _overlayContainer non-optional. */
+    @Optional() private _overlayContainer?: OverlayContainer,
+    /** @breaking-change 7.0.0 Make the _document non-optional. */
+    // tslint:disable-next-line:no-any
+    @Optional() @Inject(DOCUMENT) private _document?: any,
   ) {
     // tslint:disable-next-line:strict-type-predicates
     if (typeof window !== 'undefined') {
@@ -271,9 +294,21 @@ export class DtFilterFieldRangeTrigger implements OnDestroy {
 
   /** Returns the overlay position. */
   private _getOverlayPosition(): PositionStrategy {
-    this._positionStrategy = this._overlay
-      .position()
-      .flexibleConnectedTo(this._elementRef)
+    /**
+     * @breaking-change Switch to only use the DtFlexibleConnectedPositionStrategy
+     * with 7.0.0
+     */
+    const originalPositionStrategy =
+      this._viewportRuler && this._platform && this._overlayContainer
+        ? new DtFlexibleConnectedPositionStrategy(
+            this._elementRef,
+            this._viewportRuler,
+            this._document,
+            this._platform,
+            this._overlayContainer,
+          )
+        : this._overlay.position().flexibleConnectedTo(this._elementRef);
+    this._positionStrategy = originalPositionStrategy
       .withFlexibleDimensions(false)
       .withPush(false)
       .withPositions([