Skip to content

Commit f8ef6ab

Browse files
authored
fix(simple-combo): Focus on programmatically closing combo (#16806)
1 parent 1281679 commit f8ef6ab

2 files changed

Lines changed: 26 additions & 1 deletion

File tree

projects/igniteui-angular/simple-combo/src/simple-combo/simple-combo.component.spec.ts

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2103,6 +2103,29 @@ describe('IgxSimpleCombo', () => {
21032103
fixture.detectChanges();
21042104
expect(document.activeElement).toEqual(thirdComboInput.nativeElement);
21052105
}));
2106+
2107+
it('should lose focus when user closes combo by clicking outside', fakeAsync(() => {
2108+
// Initially combo is not focused
2109+
expect(document.activeElement).not.toBe(input.nativeElement);
2110+
2111+
// Click inside combo input to focus it
2112+
input.triggerEventHandler('focus', {});
2113+
input.triggerEventHandler('click', UIInteractions.getMouseEvent('click'));
2114+
fixture.detectChanges();
2115+
2116+
// Verify combo is focused and opened
2117+
expect(document.activeElement).toBe(input.nativeElement);
2118+
expect(combo.collapsed).toBe(false);
2119+
2120+
// Simulate outside click by clicking on document body
2121+
// This triggers the blur event which is what happens on outside clicks
2122+
input.triggerEventHandler('blur', {});
2123+
document.body.click();
2124+
tick();
2125+
fixture.detectChanges();
2126+
2127+
expect(document.activeElement).not.toBe(input.nativeElement);
2128+
}));
21062129
});
21072130

21082131
describe('Form control tests: ', () => {

projects/igniteui-angular/simple-combo/src/simple-combo/simple-combo.component.ts

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -231,11 +231,13 @@ export class IgxSimpleComboComponent extends IgxComboBaseDirective implements Co
231231
}
232232
if (this.getEditElement() && !args.event) {
233233
this._collapsing = true;
234+
// Only focus back when programmatically closing (no user event)
235+
// to avoid focus loops when user clicks on another combo
236+
this.comboInput.focus();
234237
} else {
235238
this.clearOnBlur();
236239
this._onTouchedCallback();
237240
}
238-
this.comboInput.focus();
239241
});
240242

241243
// in reactive form the control is not present initially

0 commit comments

Comments
 (0)