fix(combo): block disabled dropdown interaction

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`.

projects/igniteui-angular/combo/README.md

@@ -181,6 +181,8 @@ You can disable combo using the following code:
 <igx-combo [disabled]="true"></igx-combo>
 ```
 
+If the dropdown is already open, it cannot receive focus or accept a selection while disabled.
+
 <div class="divider--half"></div>
 
 ### Disable Clear

projects/igniteui-angular/combo/src/combo/combo.component.html

@@ -50,7 +50,7 @@
     (opened)="handleOpened()" (closed)="handleClosed()">
 
     <!-- The igx-combo class is needed here in order to scope the css variables -->
-    <div class="igx-combo">
+    <div class="igx-combo" [inert]="disabled">
         @if (displaySearchInput) {
             <div class="igx-combo__search">
                 <igx-input-group type="line">

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<HTMLElement>('.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();

projects/igniteui-angular/simple-combo/README.md

@@ -151,6 +151,8 @@ You can disable the combo using the following code:
 <igx-simple-combo [disabled]="true"></igx-simple-combo>
 ```
 
+If the dropdown is already open, it cannot receive focus or accept a selection while disabled.
+
 <div class="divider--half"></div>
 
 ### Disable Clear

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">
         <!-- The igx-combo class is needed here in order to scope the css variables -->
-        <div class="igx-combo">
+        <div class="igx-combo" [inert]="disabled">
             <ng-container *ngTemplateOutlet="headerTemplate"></ng-container>
 
             <div #dropdownItemContainer class="igx-combo__content" [style.overflow]="'hidden'"

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

@@ -604,6 +604,23 @@ describe('IgxSimpleCombo', () => {
             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<HTMLElement>('.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();