From ad21a82981854bbb3be7e575ab73232959508c9a Mon Sep 17 00:00:00 2001 From: Arkan Ahmedov Date: Thu, 17 Oct 2024 15:46:12 +0300 Subject: [PATCH 1/5] 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 d223f8e7e39..994129d6316 100644 --- a/projects/igniteui-angular/src/lib/combo/combo.common.ts +++ b/projects/igniteui-angular/src/lib/combo/combo.common.ts @@ -1218,6 +1218,9 @@ export abstract class IgxComboBaseDirective extends DisplayDensityBase implement /** @hidden @internal */ public handleClosed() { this.closed.emit({ owner: this }); + if(this.comboInput.nativeElement !== this.document.activeElement){ + this._validateComboState(); + } } /** @hidden @internal */ @@ -1256,12 +1259,7 @@ export abstract class IgxComboBaseDirective extends DisplayDensityBase implement /** @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(); } } @@ -1289,6 +1287,16 @@ export abstract class IgxComboBaseDirective extends DisplayDensityBase implement 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 ba674b2659f20f27067d5c5259aba982aab93da5 Mon Sep 17 00:00:00 2001 From: Arkan Ahmedov Date: Fri, 18 Oct 2024 13:50:23 +0300 Subject: [PATCH 2/5] 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 994129d6316..8d7c7f5972b 100644 --- a/projects/igniteui-angular/src/lib/combo/combo.common.ts +++ b/projects/igniteui-angular/src/lib/combo/combo.common.ts @@ -1219,7 +1219,7 @@ export abstract class IgxComboBaseDirective extends DisplayDensityBase implement public handleClosed() { this.closed.emit({ owner: this }); if(this.comboInput.nativeElement !== this.document.activeElement){ - this._validateComboState(); + this.validateComboState(); } } @@ -1259,7 +1259,7 @@ export abstract class IgxComboBaseDirective extends DisplayDensityBase implement /** @hidden @internal */ public onBlur() { if (this.collapsed) { - this._validateComboState(); + this.validateComboState(); } } @@ -1287,7 +1287,7 @@ export abstract class IgxComboBaseDirective extends DisplayDensityBase implement this.manageRequiredAsterisk(); }; - private _validateComboState() { + private validateComboState() { this._onTouchedCallback(); if (this.ngControl && this.ngControl.invalid) { From 2b18a913c4bca18fbf7ad7def46220088d73fff6 Mon Sep 17 00:00:00 2001 From: Arkan Ahmedov Date: Fri, 18 Oct 2024 15:18:08 +0300 Subject: [PATCH 3/5] 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 65ceb5fc5dc..769545f9f93 100644 --- a/projects/igniteui-angular/src/lib/combo/combo.component.spec.ts +++ b/projects/igniteui-angular/src/lib/combo/combo.component.spec.ts @@ -3416,6 +3416,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', () => { @@ -3627,7 +3649,7 @@ class IgxComboFormComponent { @Component({ template: `
- Date: Fri, 18 Oct 2024 15:35:16 +0300 Subject: [PATCH 4/5] 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 769545f9f93..205c3213070 100644 --- a/projects/igniteui-angular/src/lib/combo/combo.component.spec.ts +++ b/projects/igniteui-angular/src/lib/combo/combo.component.spec.ts @@ -3416,16 +3416,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(); From f55827aaa71f1b78609d91e411020181d30ba808 Mon Sep 17 00:00:00 2001 From: Arkan Ahmedov Date: Fri, 18 Oct 2024 16:35:47 +0300 Subject: [PATCH 5/5] fix(combo): fix comparison of nativeElement in handleClosed method --- projects/igniteui-angular/src/lib/combo/combo.common.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/igniteui-angular/src/lib/combo/combo.common.ts b/projects/igniteui-angular/src/lib/combo/combo.common.ts index 8d7c7f5972b..3838eab4ca3 100644 --- a/projects/igniteui-angular/src/lib/combo/combo.common.ts +++ b/projects/igniteui-angular/src/lib/combo/combo.common.ts @@ -1218,7 +1218,7 @@ export abstract class IgxComboBaseDirective extends DisplayDensityBase implement /** @hidden @internal */ public handleClosed() { this.closed.emit({ owner: this }); - if(this.comboInput.nativeElement !== this.document.activeElement){ + if(this.comboInput.nativeElement !== document.activeElement){ this.validateComboState(); } }