diff --git a/libs/ui/src/lib/tags-selector/tags-selector.component.ts b/libs/ui/src/lib/tags-selector/tags-selector.component.ts index 317d736f5..62e3bb674 100644 --- a/libs/ui/src/lib/tags-selector/tags-selector.component.ts +++ b/libs/ui/src/lib/tags-selector/tags-selector.component.ts @@ -4,10 +4,10 @@ import { ChangeDetectionStrategy, Component, CUSTOM_ELEMENTS_SCHEMA, - effect, ElementRef, EventEmitter, Input, + OnChanges, OnDestroy, OnInit, Output, @@ -41,7 +41,7 @@ import { BehaviorSubject, Subject, takeUntil } from 'rxjs'; styleUrls: ['./tags-selector.component.scss'], templateUrl: 'tags-selector.component.html' }) -export class GfTagsSelectorComponent implements OnInit, OnDestroy { +export class GfTagsSelectorComponent implements OnInit, OnChanges, OnDestroy { @Input() tags: Tag[]; @Input() tagsAvailable: Tag[]; @@ -57,12 +57,6 @@ export class GfTagsSelectorComponent implements OnInit, OnDestroy { private unsubscribeSubject = new Subject(); public constructor() { - effect(() => { - if (this.tagsSelected()) { - this.tagsChanged.emit(this.tagsSelected()); - } - }); - this.tagInputControl.valueChanges .pipe(takeUntil(this.unsubscribeSubject)) .subscribe((value) => { @@ -75,6 +69,11 @@ export class GfTagsSelectorComponent implements OnInit, OnDestroy { this.updateFilters(); } + public ngOnChanges() { + this.tagsSelected.set(this.tags); + this.updateFilters(); + } + public ngOnDestroy() { this.unsubscribeSubject.next(); this.unsubscribeSubject.complete(); @@ -89,6 +88,7 @@ export class GfTagsSelectorComponent implements OnInit, OnDestroy { return [...(tags ?? []), tag]; }); + this.tagsChanged.emit(this.tagsSelected()); this.tagInput.nativeElement.value = ''; this.tagInputControl.setValue(undefined); } @@ -100,6 +100,7 @@ export class GfTagsSelectorComponent implements OnInit, OnDestroy { }); }); + this.tagsChanged.emit(this.tagsSelected()); this.updateFilters(); }