fix(filter-field): Fixes an issue where suggestions are not displayed…

… in MS Edge.

When not using Ivy but View Engine, MS Edge did not display any suggestions.

Closes #1558

libs/barista-components/filter-field/src/filter-field.spec.ts

@@ -499,8 +499,10 @@ describe('DtFilterField', () => {
 
       options = getOptions(overlayContainerElement);
       expect(options.length).toBe(2);
-      expect(options[0].textContent!.trim()).toBe('Los Angeles');
-      expect(options[1].textContent!.trim()).toBe('San Fran');
+      // We use contain in favor of toBe as the text has to be inside twice due to the highlight
+      // The second occurrence is hidden by display:none
+      expect(options[0].textContent).toContain('Los Angeles');
+      expect(options[1].textContent).toContain('San Fran');
 
       zone.simulateZoneExit();
     }));
@@ -524,7 +526,9 @@ describe('DtFilterField', () => {
 
       options = getOptions(overlayContainerElement);
       expect(options.length).toBe(1);
-      expect(options[0].textContent!.trim()).toBe('Upper Austria');
+      // We use contain in favor of toBe as the text has to be inside twice due to the highlight
+      // The second occurrence is hidden by display:none
+      expect(options[0].textContent).toContain('Upper Austria');
       tick();
     }));
 
@@ -786,7 +790,9 @@ describe('DtFilterField', () => {
       advanceFilterfieldCycle();
 
       options = getOptions(overlayContainerElement);
-      expect(options[0].textContent).toMatch(/^\s*AUT\s*$/);
+      // We use contain in favor of toBe as the text has to be inside twice due to the highlight
+      // The second occurrence is hidden by display:none
+      expect(options[0].textContent).toContain('AUT');
     });
 
     it('should switch back from root after deleting a unfinished freetext filter with BACKSPACE', () => {
@@ -803,9 +809,11 @@ describe('DtFilterField', () => {
       expect(tags.length).toBe(0);
 
       const options = getOptions(overlayContainerElement);
-      expect(options[0].textContent).toMatch(/^\s*AUT\s*$/);
-      expect(options[1].textContent).toMatch(/^\s*USA\s*$/);
-      expect(options[2].textContent).toMatch(/^\s*Free\s*$/);
+      // We use contain in favor of toBe as the text has to be inside twice due to the highlight
+      // The second occurrence is hidden by display:none
+      expect(options[0].textContent).toContain('AUT');
+      expect(options[1].textContent).toContain('USA');
+      expect(options[2].textContent).toContain('Free');
     });
 
     it('should remove a parent from an autocomplete if it is distinct and an option has been selected', () => {

libs/barista-components/highlight/src/highlight.ts

@@ -30,7 +30,6 @@ import {
   Optional,
   ViewChild,
   ViewEncapsulation,
-  AfterContentInit,
 } from '@angular/core';
 import { Subscription } from 'rxjs';
 import { take } from 'rxjs/operators';
@@ -78,12 +77,7 @@ function escapeRegExp(text: string): string {
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class DtHighlight
-  implements
-    AfterContentChecked,
-    AfterContentInit,
-    AfterViewInit,
-    OnChanges,
-    OnDestroy {
+  implements AfterContentChecked, AfterViewInit, OnChanges, OnDestroy {
   /**
    * The caseSensitive input can be set to search for case sensitive occurrences.
    * Per default the search is case insensitive.
@@ -140,6 +134,14 @@ export class DtHighlight
   }
 
   ngAfterViewInit(): void {
+    // Initially we need to run and force highlight once
+    // to move the text content value into the visible span
+    // Otherwise some layouts will be tripped up, as the visible span
+    // would be 0x0 pixels large.
+    const textContent = this._getTextContent();
+    this._textContent = textContent;
+    this._highlight(true);
+
     // Observable whether the component is in the viewport.
     this._isInViewportSubscription = createInViewportStream(
       this._elementRef,
@@ -152,16 +154,6 @@ export class DtHighlight
     });
   }
 
-  ngAfterContentInit(): void {
-    // Initially we need to run and force highlight once
-    // to move the text content value into the visible span
-    // Otherwise some layouts will be tripped up, as the visible span
-    // would be 0x0 pixels large.
-    const textContent = this._getTextContent();
-    this._textContent = textContent;
-    this._highlight(true);
-  }
-
   ngOnDestroy(): void {
     this._isInViewportSubscription.unsubscribe();
   }