Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix(combo): update touched property and apply invalid color on blur when required - 17.2.x #14924

Merged
merged 9 commits into from
Oct 23, 2024
Merged

fix(combo): update touched property and apply invalid color on blur when required - 17.2.x #14924

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
ad21a82
fix(combo): created a separate method for the validation logic
Zneeky Oct 17, 2024
ba674b2
fix(combo): renamed function
Zneeky Oct 18, 2024
2b18a91
fix(combo): test for clicking away when the combo is opened
Zneeky Oct 18, 2024
de6286b
fix(combo): edited combo component test
Zneeky Oct 18, 2024
f55827a
fix(combo): fix comparison of nativeElement in handleClosed method
Zneeky Oct 18, 2024
28810e1
fix(combo): onBlur and onFocus event handling this._onTouchedCallback();
Zneeky Oct 22, 2024
fcc6b9d
fix(combo): unnecessary code in combo.component.spec.ts
Zneeky Oct 22, 2024
add1213
Merge branch '17.2.x' into aahmedov/fix-touched-ivalid-color-not-appl…
Zneeky Oct 22, 2024
40020d7
fix(combo): edited onBlur to trigger touched only in a specific scenario
Zneeky Oct 23, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 17 additions & 5 deletions projects/igniteui-angular/src/lib/combo/combo.common.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1218,6 +1218,9 @@ export abstract class IgxComboBaseDirective extends DisplayDensityBase implement
/** @hidden @internal */
public handleClosed() {
this.closed.emit({ owner: this });
if(this.comboInput.nativeElement !== document.activeElement){
this.validateComboState();
}
}

/** @hidden @internal */
Expand Down Expand Up @@ -1257,14 +1260,15 @@ export abstract class IgxComboBaseDirective extends DisplayDensityBase implement
public onBlur() {
if (this.collapsed) {
this._onTouchedCallback();
if (this.ngControl && this.ngControl.invalid) {
this.valid = IgxInputState.INVALID;
} else {
this.valid = IgxInputState.INITIAL;
}
this.validateComboState();
}
}

/** @hidden @internal */
public onFocus(): void {
this._onTouchedCallback();
}

/** @hidden @internal */
public setActiveDescendant(): void {
this.activeDescendant = this.dropdown.focusedItem?.id || '';
Expand All @@ -1289,6 +1293,14 @@ export abstract class IgxComboBaseDirective extends DisplayDensityBase implement
this.manageRequiredAsterisk();
};

private validateComboState() {
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);
}
Expand Down
3 changes: 2 additions & 1 deletion projects/igniteui-angular/src/lib/combo/combo.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
23 changes: 22 additions & 1 deletion projects/igniteui-angular/src/lib/combo/combo.component.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3416,6 +3416,27 @@ describe('igxCombo', () => {
expect(combo.valid).toEqual(IgxInputState.INITIAL);
expect(combo.comboInput.valid).toEqual(IgxInputState.INITIAL);
}));
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();
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();
}));
});
});
describe('Display density', () => {
Expand Down Expand Up @@ -3627,7 +3648,7 @@ class IgxComboFormComponent {
@Component({
template: `
<form #form="ngForm">
<igx-combo #testCombo class="input-container" [placeholder]="'Locations'"
<igx-combo #testCombo #testComboNgModel="ngModel" class="input-container" [placeholder]="'Locations'"
name="anyName" required [(ngModel)]="values"
[data]="items" [filterable]="filterableFlag"
[displayKey]="'field'" [valueKey]="'field'"
Expand Down
Loading