fix(combo): onBlur and onFocus event handling this._onTouchedCallback();

Author: Zneeky

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

@@ -1251,11 +1251,17 @@ export abstract class IgxComboBaseDirective implements IgxComboBase, AfterViewCh
 
     /** @hidden @internal */
     public onBlur() {
+        this._onTouchedCallback();
         if (this.collapsed) {
             this.validateComboState();
         }
     }
 
+    /** @hidden @internal */
+    public onFocus(): void {
+        this._onTouchedCallback();
+    }
+
     /** @hidden @internal */
     public setActiveDescendant(): void {
         this.activeDescendant = this.dropdown.focusedItem?.id || '';
@@ -1281,8 +1287,6 @@ export abstract class IgxComboBaseDirective implements IgxComboBase, AfterViewCh
     };
 
     private validateComboState() {
-        this._onTouchedCallback();
-
         if (this.ngControl && this.ngControl.invalid) {
             this.valid = IgxInputState.INVALID;
         } else {

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

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

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

@@ -3603,23 +3603,28 @@ describe('igxCombo', () => {
                     expect(combo.valid).toEqual(IgxInputState.INITIAL);
                     expect(combo.comboInput.valid).toEqual(IgxInputState.INITIAL);
                 }));
-                it('should mark the combo as touched and invalid when opened and the user clicks away', fakeAsync(() => {
-                    // Access the NgModel for the testCombo
+                it('should mark as touched and invalid when combo is focused, dropdown appears, and user clicks away without selection', fakeAsync(() => {
                     const ngModel = fixture.debugElement.query(By.directive(NgModel)).injector.get(NgModel);
                     expect(combo.valid).toEqual(IgxInputState.INITIAL);
                     expect(combo.comboInput.valid).toEqual(IgxInputState.INITIAL);
                     expect(ngModel.touched).toBeFalse();
+
                     combo.open();
+                    input.triggerEventHandler('focus', {});
+                    fixture.detectChanges();
+                    expect(ngModel.touched).toBeTrue();
+                    combo.searchInput.nativeElement.focus();
                     fixture.detectChanges();
-
                     const documentClickEvent = new MouseEvent('click', { bubbles: true });
                     document.body.dispatchEvent(documentClickEvent);
                     fixture.detectChanges();
                     tick();
-
+                    document.body.focus();
+                    fixture.detectChanges();
+                    tick();
                     expect(combo.valid).toEqual(IgxInputState.INVALID);
                     expect(combo.comboInput.valid).toEqual(IgxInputState.INVALID);
-                    expect(ngModel.touched).toBeTrue(); // NgModel should now be marked as touched
+                    expect(ngModel.touched).toBeTrue();
                 }));
             });
         });