fix(tags): mark tag-list pristine on init (#DS-3669)

packages/components/tags/tag-list.component.spec.ts

@@ -22,7 +22,7 @@ import { KbqTagList, KbqTagsModule } from './index';
 import { KbqTagInputEvent } from './tag-input';
 import { KbqTag, KbqTagEvent, KbqTagRemove } from './tag.component';
 
-describe('KbqTagList', () => {
+describe(KbqTagList.name, () => {
     let fixture: ComponentFixture<any>;
     let tagListDebugElement: DebugElement;
     let tagListNativeElement: HTMLElement;
@@ -726,6 +726,13 @@ describe('KbqTagList', () => {
                 expect(fixture.componentInstance.control.touched).toBe(true);
             });
 
+            it('should mark as pristine on init', () => {
+                fixture.componentInstance.control = new UntypedFormControl('pizza-1');
+                fixture.detectChanges();
+
+                expect(fixture.componentInstance.control.dirty).toBeFalsy();
+            });
+
             it('should not set touched when a disabled tag list is touched', () => {
                 expect(fixture.componentInstance.control.touched).toBe(false);
 

packages/components/tags/tag-list.component.ts

@@ -372,34 +372,40 @@ export class KbqTagList
         });
 
         // When the list changes, re-subscribe
-        this.tags.changes.pipe(startWith(null), takeUntilDestroyed(this.destroyRef)).subscribe(() => {
-            if (this.disabled) {
-                // Since this happens after the content has been
-                // checked, we need to defer it to the next tick.
-                Promise.resolve().then(() => {
-                    this.syncTagsDisabledState();
-                });
-            }
+        this.tags.changes
+            .pipe(startWith(null), takeUntilDestroyed(this.destroyRef))
+            .subscribe((currentTags: QueryList<KbqTag> | null) => {
+                if (this.disabled) {
+                    // Since this happens after the content has been
+                    // checked, we need to defer it to the next tick.
+                    Promise.resolve().then(() => {
+                        this.syncTagsDisabledState();
+                    });
+                }
 
-            this.resetTags();
+                this.resetTags();
 
-            // Reset tags selected/deselected status
-            this.initializeSelection();
+                // Reset tags selected/deselected status
+                this.initializeSelection();
 
-            // Check to see if we need to update our tab index
-            this.updateTabIndex();
+                // Check to see if we need to update our tab index
+                this.updateTabIndex();
 
-            // Check to see if we have a destroyed tag and need to refocus
-            this.updateFocusForDestroyedTags();
+                // Check to see if we have a destroyed tag and need to refocus
+                this.updateFocusForDestroyedTags();
 
-            // Defer setting the value in order to avoid the "Expression
-            // has changed after it was checked" errors from Angular.
-            Promise.resolve().then(() => {
-                this.tagChanges.emit(this.tags.toArray());
-                this.stateChanges.next();
-                this.propagateTagsChanges();
+                // Defer setting the value in order to avoid the "Expression
+                // has changed after it was checked" errors from Angular.
+                Promise.resolve().then(() => {
+                    this.tagChanges.emit(this.tags.toArray());
+                    this.stateChanges.next();
+
+                    // do not call on initial
+                    if (currentTags) {
+                        this.propagateTagsChanges();
+                    }
+                });
             });
-        });
 
         this.propagateSelectableToChildren();
     }
@@ -542,6 +548,7 @@ export class KbqTagList
 
     setSelectionByValue(value: any, isUserInput: boolean = true) {
         this.clearSelection();
+        // @TODO seems like redundant action, need to double check
         this.tags.forEach((tag) => tag.deselect());
 
         if (Array.isArray(value)) {
@@ -722,7 +729,7 @@ export class KbqTagList
     }
 
     private propagateTagsChanges(): void {
-        const valueToEmit: any = this.tags.map((tag) => tag.value);
+        const valueToEmit: any[] = this.tags.map((tag) => tag.value);
 
         this._value = valueToEmit;
         this.change.emit(new KbqTagListChange(this, valueToEmit));