fix(highlight): Fixes an issue where the highlight would break layouts.

When the highlight was wrapped in an option in the filter field and out of view, it was not
initially rendered, but broke the layout of the autocomplete overlay by being too small.

When running and forcing highlight after the init a first time, the value will be mirrored into the
visible span, therefor giving it the size it should eventually have.

Fixes #1420

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

@@ -30,6 +30,7 @@ import {
   Optional,
   ViewChild,
   ViewEncapsulation,
+  AfterContentInit,
 } from '@angular/core';
 import { Subscription } from 'rxjs';
 import { take } from 'rxjs/operators';
@@ -77,7 +78,12 @@ function escapeRegExp(text: string): string {
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class DtHighlight
-  implements AfterContentChecked, AfterViewInit, OnChanges, OnDestroy {
+  implements
+    AfterContentChecked,
+    AfterContentInit,
+    AfterViewInit,
+    OnChanges,
+    OnDestroy {
   /**
    * The caseSensitive input can be set to search for case sensitive occurrences.
    * Per default the search is case insensitive.
@@ -146,6 +152,16 @@ 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();
   }
@@ -164,14 +180,13 @@ export class DtHighlight
   }
 
   /** The highlight function triggers the highlighting process if we are in a browser context. */
-  private _highlight(): void {
+  private _highlight(force: boolean = false): void {
     // Make sure to only update the highlight if it is in the viewport.
     // This is needed because the highlight component can possibly be
     // rendered a lot if it is used for example in a big data table or autocomplete.
-    if (!this._isInViewport || !this._document) {
+    if (!force && (!this._isInViewport || !this._document)) {
       return;
     }
-
     // As we create the highlight nodes with browser native functions we do not depend on Angular's CD.
     // So we can run this code outside the zone to boost performance.
     this._zone.runOutsideAngular(() => {
@@ -181,7 +196,6 @@ export class DtHighlight
 
       // Remove the old nodes.
       removeNodeChildren(transformedEl);
-
       if (textContent !== null && Boolean(term && term.length)) {
         const flags = this._caseSensitive ? 'gm' : 'gmi';
         const regExp = new RegExp(`(${escapeRegExp(term)})`, flags);

libs/examples/src/autocomplete/autocomplete-default-example/autocomplete-default-example.ts

@@ -22,5 +22,20 @@ import { Component } from '@angular/core';
 })
 export class DtExampleAutocompleteDefault {
   value: string;
-  options: string[] = ['One', 'Two', 'Three'];
+  options: string[] = [
+    'first item',
+    'second item',
+    'third item',
+    'fourth item',
+    'fifth item',
+    'sixth item',
+    'seventh item',
+    'eighth item',
+    'ninth item',
+    'tenth item',
+    'eleventh item',
+    'twelfth item',
+    'some very long item',
+    'some even much longer item',
+  ];
 }

libs/examples/src/filter-field/filter-field-default-example/filter-field-default-example.ts

@@ -25,30 +25,24 @@ export class DtExampleFilterFieldDefault {
   private DATA = {
     autocomplete: [
       {
-        name: 'AUT',
-        autocomplete: [{ name: 'Linz' }, { name: 'Vienna' }, { name: 'Graz' }],
-      },
-      {
-        name: 'USA',
+        name: 'items',
         autocomplete: [
-          { name: 'San Francisco' },
-          { name: 'Los Angeles' },
-          { name: 'New York' },
-          { name: 'Custom', suggestions: [], validators: [] },
+          { name: 'first item' },
+          { name: 'second item' },
+          { name: 'third item' },
+          { name: 'fourth item' },
+          { name: 'fifth item' },
+          { name: 'sixth item' },
+          { name: 'seventh item' },
+          { name: 'eighth item' },
+          { name: 'ninth item' },
+          { name: 'tenth item' },
+          { name: 'eleventh item' },
+          { name: 'twelfth item' },
+          { name: 'some very long item' },
+          { name: 'some even much longer item' },
         ],
       },
-      {
-        name: 'Requests per minute',
-        range: {
-          operators: {
-            range: true,
-            equal: true,
-            greaterThanEqual: true,
-            lessThanEqual: true,
-          },
-          unit: 's',
-        },
-      },
     ],
   };