diff --git a/projects/igniteui-angular/src/lib/simple-combo/simple-combo.component.spec.ts b/projects/igniteui-angular/src/lib/simple-combo/simple-combo.component.spec.ts index bb6a327e85f..1043809c875 100644 --- a/projects/igniteui-angular/src/lib/simple-combo/simple-combo.component.spec.ts +++ b/projects/igniteui-angular/src/lib/simple-combo/simple-combo.component.spec.ts @@ -1119,7 +1119,8 @@ describe('IgxSimpleCombo', () => { IgxSimpleComboSampleComponent, IgxComboInContainerTestComponent, IgxSimpleComboIconTemplatesComponent, - IgxSimpleComboDirtyCheckTestComponent + IgxSimpleComboDirtyCheckTestComponent, + IgxSimpleComboTabBehaviorTestComponent ] }).compileComponents(); })); @@ -2113,6 +2114,35 @@ describe('IgxSimpleCombo', () => { expect(reactiveForm.dirty).toBe(false); })); + + it('should focus on the next combo when Tab is pressed', fakeAsync(() => { + fixture = TestBed.createComponent(IgxSimpleComboTabBehaviorTestComponent); + fixture.detectChanges(); + + const combos = fixture.debugElement.queryAll(By.directive(IgxSimpleComboComponent)); + expect(combos.length).toBe(3); + + const firstComboInput = combos[0].query(By.css(`.${CSS_CLASS_COMBO_INPUTGROUP}`)); + const secondComboInput = combos[1].query(By.css(`.${CSS_CLASS_COMBO_INPUTGROUP}`)); + const thirdComboInput = combos[2].query(By.css(`.${CSS_CLASS_COMBO_INPUTGROUP}`)); + + firstComboInput.nativeElement.focus(); + tick(); + fixture.detectChanges(); + expect(document.activeElement).toEqual(firstComboInput.nativeElement); + + UIInteractions.triggerEventHandlerKeyDown('Tab', firstComboInput); + secondComboInput.nativeElement.focus(); + tick(); + fixture.detectChanges(); + expect(document.activeElement).toEqual(secondComboInput.nativeElement); + + UIInteractions.triggerEventHandlerKeyDown('Tab', secondComboInput); + thirdComboInput.nativeElement.focus(); + tick(); + fixture.detectChanges(); + expect(document.activeElement).toEqual(thirdComboInput.nativeElement); + })); }); describe('Display density', () => { @@ -3456,3 +3486,64 @@ export class IgxSimpleComboDirtyCheckTestComponent implements OnInit { ]; } } + +@Component({ + template: ` +
+ `, + standalone: true, + imports: [IgxSimpleComboComponent, ReactiveFormsModule] +}) +export class IgxSimpleComboTabBehaviorTestComponent implements OnInit { + @ViewChild('combo', { read: IgxSimpleComboComponent, static: true }) + public combo: IgxSimpleComboComponent; + @ViewChild('combo2', { read: IgxSimpleComboComponent, static: true }) + public combo2: IgxSimpleComboComponent; + @ViewChild('combo3', { read: IgxSimpleComboComponent, static: true }) + public combo3: IgxSimpleComboComponent; + + public cities = []; + + public form = new FormGroup({ + city: new FormControl