From d1482c2017d6601d294c9d3382d013de0f5efe00 Mon Sep 17 00:00:00 2001 From: Vehbi Karaagac <42275242+Xapollon430@users.noreply.github.com> Date: Thu, 12 Nov 2026 13:07:04 -0500 Subject: [PATCH] fix(combo): block disabled dropdown interaction --- CHANGELOG.md | 2 ++ projects/igniteui-angular/combo/README.md | 2 ++ .../combo/src/combo/combo.component.html | 2 +- .../combo/src/combo/combo.component.spec.ts | 17 +++++++++++++++++ .../igniteui-angular/simple-combo/README.md | 2 ++ .../simple-combo/simple-combo.component.html | 2 +- .../simple-combo/simple-combo.component.spec.ts | 17 +++++++++++++++++ 7 files changed, 42 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index bf83fc33a69..241614b8529 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -68,6 +68,8 @@ All notable changes for each version of this project will be documented in this ### Bug Fixes +- `IgxComboComponent`, `IgxSimpleComboComponent` + - An open dropdown no longer accepts interaction while the combo is disabled. - **Forms** - `IgxSnackbarComponent` - The default action button now renders with `type="button"`. Previously, when the snackbar was inside a `form` (for example as part of a grid), it became the default button of the form, so pressing Enter in any input of the form clicked it, which triggered the snackbar action and submitted the form. - `IgxQueryBuilderComponent` - The add expression and the group (AND/OR) buttons now render with `type="button"`. Previously, clicking them inside a `form` submitted it. Pressing Enter in the query builder inputs also no longer submits a surrounding `form`. diff --git a/projects/igniteui-angular/combo/README.md b/projects/igniteui-angular/combo/README.md index 810a12a4f16..37e533f2934 100644 --- a/projects/igniteui-angular/combo/README.md +++ b/projects/igniteui-angular/combo/README.md @@ -181,6 +181,8 @@ You can disable combo using the following code: ``` +If the dropdown is already open, it cannot receive focus or accept a selection while disabled. +
### Disable Clear diff --git a/projects/igniteui-angular/combo/src/combo/combo.component.html b/projects/igniteui-angular/combo/src/combo/combo.component.html index a4f06cd1db7..c309285c74a 100644 --- a/projects/igniteui-angular/combo/src/combo/combo.component.html +++ b/projects/igniteui-angular/combo/src/combo/combo.component.html @@ -50,7 +50,7 @@ (opened)="handleOpened()" (closed)="handleClosed()"> -
+
@if (displaySearchInput) {
diff --git a/projects/igniteui-angular/combo/src/combo/combo.component.spec.ts b/projects/igniteui-angular/combo/src/combo/combo.component.spec.ts index a91e916ca5e..57bdb1085f5 100644 --- a/projects/igniteui-angular/combo/src/combo/combo.component.spec.ts +++ b/projects/igniteui-angular/combo/src/combo/combo.component.spec.ts @@ -993,6 +993,23 @@ describe('igxCombo', () => { combo = fixture.componentInstance.combo; input = fixture.debugElement.query(By.css(`.${CSS_CLASS_COMBO_INPUTGROUP}`)); }); + it('should prevent interaction with the open dropdown while disabled', async () => { + combo.open(); + await fixture.whenStable(); + fixture.detectChanges(); + const panel = document.querySelector('.igx-overlay__content .igx-combo')!; + + expect(panel.inert).toBeFalsy(); + + combo.setDisabledState(true); + fixture.detectChanges(); + expect(panel.inert).toBeTruthy(); + + combo.setDisabledState(false); + fixture.detectChanges(); + expect(panel.inert).toBeFalsy(); + }); + it('should initialize the combo component properly', () => { const toggleButton = fixture.debugElement.query(By.css('.' + CSS_CLASS_TOGGLEBUTTON)); expect(fixture.componentInstance).toBeDefined(); diff --git a/projects/igniteui-angular/simple-combo/README.md b/projects/igniteui-angular/simple-combo/README.md index 6e33e486379..7d1b7c67819 100644 --- a/projects/igniteui-angular/simple-combo/README.md +++ b/projects/igniteui-angular/simple-combo/README.md @@ -151,6 +151,8 @@ You can disable the combo using the following code: ``` +If the dropdown is already open, it cannot receive focus or accept a selection while disabled. +
### Disable Clear diff --git a/projects/igniteui-angular/simple-combo/src/simple-combo/simple-combo.component.html b/projects/igniteui-angular/simple-combo/src/simple-combo/simple-combo.component.html index a9770338b8e..37daf28bcef 100644 --- a/projects/igniteui-angular/simple-combo/src/simple-combo/simple-combo.component.html +++ b/projects/igniteui-angular/simple-combo/src/simple-combo/simple-combo.component.html @@ -67,7 +67,7 @@ [width]="itemsWidth || '100%'" (opening)="handleOpening($event)" (closing)="handleClosing($event)" (opened)="handleOpened()" (closed)="handleClosed()" [singleMode]="true"> -
+
{ input = fixture.debugElement.query(By.css(`.${CSS_CLASS_COMBO_INPUTGROUP}`)); }); + it('should prevent interaction with the open dropdown while disabled', async () => { + combo.open(); + await fixture.whenStable(); + fixture.detectChanges(); + const panel = document.querySelector('.igx-overlay__content .igx-combo')!; + + expect(panel.inert).toBeFalsy(); + + combo.setDisabledState(true); + fixture.detectChanges(); + expect(panel.inert).toBeTruthy(); + + combo.setDisabledState(false); + fixture.detectChanges(); + expect(panel.inert).toBeFalsy(); + }); + it('should initialize the combo component properly', () => { const toggleButton = fixture.debugElement.query(By.css('.' + CSS_CLASS_TOGGLEBUTTON)); expect(fixture.componentInstance).toBeDefined();