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

Author: NikGurev

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.pristine).toBeTruthy();
+            });
+
             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();
     }
@@ -445,7 +451,7 @@ export class KbqTagList
     registerInput(inputElement: KbqTagTextControl): void {
         this.tagInput = inputElement;
 
-        // todo need rethink about it
+        // todo need rethink about it (#DS-3740)
         if (this.ngControl && inputElement.ngControl?.statusChanges) {
             inputElement.ngControl.statusChanges.subscribe(() =>
                 this.ngControl.control!.setErrors(inputElement.ngControl!.errors)
@@ -495,7 +501,7 @@ export class KbqTagList
             return;
         }
 
-        // TODO: ARIA says this should focus the first `selected` tag if any are selected.
+        // TODO: ARIA says this should focus the first `selected` tag if any are selected. (#DS-3740)
         // Focus on first element if there's no tagInput inside tag-list
         if (this.tagInput && this.tagInput.focused) {
             // do nothing
@@ -542,6 +548,7 @@ export class KbqTagList
 
     setSelectionByValue(value: any, isUserInput: boolean = true) {
         this.clearSelection();
+        // @TODO seems like redundant action, need to double check (#DS-3740)
         this.tags.forEach((tag) => tag.deselect());
 
         if (Array.isArray(value)) {
@@ -704,7 +711,7 @@ export class KbqTagList
     }
 
     /** Emits change event to set the model value. */
-    // todo need rethink this method and selection logic
+    // todo need rethink this method and selection logic (#DS-3740)
     private propagateChanges(fallbackValue?: any): void {
         let valueToEmit: any;