From 6bb2950d8170253cd339c4689a2e9fc48f13f9ca Mon Sep 17 00:00:00 2001 From: Arkan Ahmedov Date: Thu, 17 Oct 2024 15:46:12 +0300 Subject: [PATCH 1/4] fix(combo): created a separate method for the validation logic --- .../src/lib/combo/combo.common.ts | 20 +++++++++++++------ 1 file changed, 14 insertions(+), 6 deletions(-) diff --git a/projects/igniteui-angular/src/lib/combo/combo.common.ts b/projects/igniteui-angular/src/lib/combo/combo.common.ts index cc108f528cf..5a9134f50bb 100644 --- a/projects/igniteui-angular/src/lib/combo/combo.common.ts +++ b/projects/igniteui-angular/src/lib/combo/combo.common.ts @@ -1214,6 +1214,9 @@ export abstract class IgxComboBaseDirective implements IgxComboBase, AfterViewCh /** @hidden @internal */ public handleClosed() { this.closed.emit({ owner: this }); + if(this.comboInput.nativeElement !== this.document.activeElement){ + this._validateComboState(); + } } /** @hidden @internal */ @@ -1252,12 +1255,7 @@ export abstract class IgxComboBaseDirective implements IgxComboBase, AfterViewCh /** @hidden @internal */ public onBlur() { if (this.collapsed) { - this._onTouchedCallback(); - if (this.ngControl && this.ngControl.invalid) { - this.valid = IgxInputState.INVALID; - } else { - this.valid = IgxInputState.INITIAL; - } + this._validateComboState(); } } @@ -1285,6 +1283,16 @@ export abstract class IgxComboBaseDirective implements IgxComboBase, AfterViewCh this.manageRequiredAsterisk(); }; + private _validateComboState() { + this._onTouchedCallback(); + + if (this.ngControl && this.ngControl.invalid) { + this.valid = IgxInputState.INVALID; + } else { + this.valid = IgxInputState.INITIAL; + } + } + private get isTouchedOrDirty(): boolean { return (this.ngControl.control.touched || this.ngControl.control.dirty); } From 951e9bd9783d7eb9546845a9a07afd7eb1976a75 Mon Sep 17 00:00:00 2001 From: Arkan Ahmedov Date: Fri, 18 Oct 2024 13:50:23 +0300 Subject: [PATCH 2/4] fix(combo): renamed function --- projects/igniteui-angular/src/lib/combo/combo.common.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/projects/igniteui-angular/src/lib/combo/combo.common.ts b/projects/igniteui-angular/src/lib/combo/combo.common.ts index 5a9134f50bb..b87852a03f4 100644 --- a/projects/igniteui-angular/src/lib/combo/combo.common.ts +++ b/projects/igniteui-angular/src/lib/combo/combo.common.ts @@ -1215,7 +1215,7 @@ export abstract class IgxComboBaseDirective implements IgxComboBase, AfterViewCh public handleClosed() { this.closed.emit({ owner: this }); if(this.comboInput.nativeElement !== this.document.activeElement){ - this._validateComboState(); + this.validateComboState(); } } @@ -1255,7 +1255,7 @@ export abstract class IgxComboBaseDirective implements IgxComboBase, AfterViewCh /** @hidden @internal */ public onBlur() { if (this.collapsed) { - this._validateComboState(); + this.validateComboState(); } } @@ -1283,7 +1283,7 @@ export abstract class IgxComboBaseDirective implements IgxComboBase, AfterViewCh this.manageRequiredAsterisk(); }; - private _validateComboState() { + private validateComboState() { this._onTouchedCallback(); if (this.ngControl && this.ngControl.invalid) { From e53d267ba4e05f90aa3a616f4f4e1fafd9b4c0e1 Mon Sep 17 00:00:00 2001 From: Arkan Ahmedov Date: Fri, 18 Oct 2024 15:18:08 +0300 Subject: [PATCH 3/4] fix(combo): test for clicking away when the combo is opened --- .../src/lib/combo/combo.component.spec.ts | 24 ++++++++++++++++++- 1 file changed, 23 insertions(+), 1 deletion(-) diff --git a/projects/igniteui-angular/src/lib/combo/combo.component.spec.ts b/projects/igniteui-angular/src/lib/combo/combo.component.spec.ts index a1a3aa35cd4..5220f631368 100644 --- a/projects/igniteui-angular/src/lib/combo/combo.component.spec.ts +++ b/projects/igniteui-angular/src/lib/combo/combo.component.spec.ts @@ -3606,6 +3606,28 @@ describe('igxCombo', () => { expect(combo.valid).toEqual(IgxInputState.INITIAL); expect(combo.comboInput.valid).toEqual(IgxInputState.INITIAL); })); + + fit('should mark the combo as touched and invalid when opened and the user clicks away', fakeAsync(() => { + // Access the NgModel for the testCombo + const ngModel = fixture.debugElement.query(By.directive(NgModel)).injector.get(NgModel); + + // Initially, the combo should not be touched + expect(combo.valid).toEqual(IgxInputState.INITIAL); + expect(combo.comboInput.valid).toEqual(IgxInputState.INITIAL); + expect(ngModel.touched).toBeFalse(); + + combo.open(); + fixture.detectChanges(); + + const documentClickEvent = new MouseEvent('click', { bubbles: true }); + document.body.dispatchEvent(documentClickEvent); + 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 + })); }); }); describe('Display density', () => { @@ -3787,7 +3809,7 @@ class IgxComboFormComponent { @Component({ template: `
- Date: Fri, 18 Oct 2024 15:35:16 +0300 Subject: [PATCH 4/4] fix(combo): edited combo component test --- .../igniteui-angular/src/lib/combo/combo.component.spec.ts | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/projects/igniteui-angular/src/lib/combo/combo.component.spec.ts b/projects/igniteui-angular/src/lib/combo/combo.component.spec.ts index 5220f631368..618e89a329e 100644 --- a/projects/igniteui-angular/src/lib/combo/combo.component.spec.ts +++ b/projects/igniteui-angular/src/lib/combo/combo.component.spec.ts @@ -3606,16 +3606,12 @@ describe('igxCombo', () => { expect(combo.valid).toEqual(IgxInputState.INITIAL); expect(combo.comboInput.valid).toEqual(IgxInputState.INITIAL); })); - - fit('should mark the combo as touched and invalid when opened and the user clicks away', fakeAsync(() => { + it('should mark the combo as touched and invalid when opened and the user clicks away', fakeAsync(() => { // Access the NgModel for the testCombo const ngModel = fixture.debugElement.query(By.directive(NgModel)).injector.get(NgModel); - - // Initially, the combo should not be touched expect(combo.valid).toEqual(IgxInputState.INITIAL); expect(combo.comboInput.valid).toEqual(IgxInputState.INITIAL); expect(ngModel.touched).toBeFalse(); - combo.open(); fixture.detectChanges();