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({ value: undefined, disabled: false }), + city2: new FormControl({ value: undefined, disabled: false }), + city3: new FormControl({ value: undefined, disabled: false }), + }); + + public ngOnInit(): void { + this.cities = [ + { id: 1, name: 'New York' }, + { id: 2, name: 'Los Angeles' }, + { id: 3, name: 'Chicago' }, + { id: 4, name: 'Houston' }, + { id: 5, name: 'Phoenix' } + ]; + } +} diff --git a/projects/igniteui-angular/src/lib/simple-combo/simple-combo.component.ts b/projects/igniteui-angular/src/lib/simple-combo/simple-combo.component.ts index 539ac855880..b54dc83f0ac 100644 --- a/projects/igniteui-angular/src/lib/simple-combo/simple-combo.component.ts +++ b/projects/igniteui-angular/src/lib/simple-combo/simple-combo.component.ts @@ -466,9 +466,8 @@ export class IgxSimpleComboComponent extends IgxComboBaseDirective implements Co } this.composing = false; - // explicitly update selection and trigger text selection so that we don't have to force CD + // explicitly update selection so that we don't have to force CD this.textSelection.selected = true; - this.textSelection.trigger(); } /** @hidden @internal */