Merge pull request #14963 from IgniteUI/aahmedov/fix-touched-invalid-color-follow-up-master

fix(combo): update touched property and apply invalid color on blur when required - follow-up - master

Author: kacheshmarova

projects/igniteui-angular/src/lib/combo/combo.common.ts

@@ -1202,15 +1202,15 @@ export abstract class IgxComboBaseDirective implements IgxComboBase, AfterViewCh
         this.searchValue = '';
         if (!e.event) {
             this.comboInput?.nativeElement.focus();
+        } else {
+            this._onTouchedCallback();
+            this.updateValidity();
         }
     }
 
     /** @hidden @internal */
     public handleClosed() {
         this.closed.emit({ owner: this });
-        if(this.comboInput.nativeElement !== this.document.activeElement){
-            this.validateComboState();
-        }
     }
 
     /** @hidden @internal */
@@ -1250,15 +1250,10 @@ export abstract class IgxComboBaseDirective implements IgxComboBase, AfterViewCh
     public onBlur() {
         if (this.collapsed) {
             this._onTouchedCallback();
-            this.validateComboState();
+            this.updateValidity();
         }
     }
 
-    /** @hidden @internal */
-    public onFocus(): void {
-        this._onTouchedCallback();
-    }
-
     /** @hidden @internal */
     public setActiveDescendant(): void {
         this.activeDescendant = this.dropdown.focusedItem?.id || '';
@@ -1283,7 +1278,7 @@ export abstract class IgxComboBaseDirective implements IgxComboBase, AfterViewCh
         this.manageRequiredAsterisk();
     };
 
-    private validateComboState() {
+    private updateValidity() {
         if (this.ngControl && this.ngControl.invalid) {
             this.valid = IgxInputState.INVALID;
         } else {

projects/igniteui-angular/src/lib/combo/combo.component.html

@@ -13,8 +13,7 @@
             role="combobox" aria-haspopup="listbox"
             [attr.aria-expanded]="!dropdown.collapsed" [attr.aria-controls]="dropdown.listId"
             [attr.aria-labelledby]="ariaLabelledBy || label?.id || placeholder"
-            (blur)="onBlur()"
-            (focus)="onFocus()" />
+            (blur)="onBlur()" />
     <ng-container ngProjectAs="igx-suffix">
         <ng-content select="igx-suffix"></ng-content>
     </ng-container>

projects/igniteui-angular/src/lib/combo/combo.component.spec.ts

@@ -3615,7 +3615,7 @@ describe('igxCombo', () => {
                     combo.open();
                     input.triggerEventHandler('focus', {});
                     fixture.detectChanges();
-                    expect(ngModel.touched).toBeTrue();
+                    expect(ngModel.touched).toBeFalse();
                     combo.searchInput.nativeElement.focus();
                     fixture.detectChanges();
                     const documentClickEvent = new MouseEvent('click', { bubbles: true });