Enhance change detection in Typeahead components by marking for check on updates

Author: Derek Liang

src/typeahead/typeahead-container.component.ts

@@ -154,12 +154,15 @@ export class TypeaheadContainerComponent implements OnDestroy {
 
       if (concurrency) {
         this.selectActive(concurrency);
+        this.changeDetectorRef.markForCheck();
 
         return;
       }
 
       this.active = void 0;
     }
+
+    this.changeDetectorRef.markForCheck();
   }
 
   get isTopPosition(): boolean {
@@ -384,6 +387,7 @@ export class TypeaheadContainerComponent implements OnDestroy {
       preview = value;
     }
     this.parent?.typeaheadOnPreview.emit(preview);
+    this.changeDetectorRef.markForCheck();
   }
 
   private isScrolledIntoView(elem: HTMLElement): boolean {

src/typeahead/typeahead.directive.ts

@@ -582,6 +582,7 @@ export class TypeaheadDirective implements OnInit, OnDestroy {
 
       this._container.query = this.tokenizeQuery(normalizedQuery);
       this._container.matches = this._matches;
+      this.changeDetection.markForCheck();
     } else {
       this.show();
     }