fix(select): block interaction while disabled

CHANGELOG.md

@@ -68,6 +68,8 @@ All notable changes for each version of this project will be documented in this
 
 ### Bug Fixes
 
+- `IgxSelectComponent`
+    - An open dropdown no longer accepts interaction while the select 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/select/README.md

@@ -76,6 +76,8 @@ You can disable select using the following code:
 ```html
 <igx-select [disabled]="true"></igx-select>
 ```
+
+If the dropdown is open when the select becomes disabled, it cannot receive focus or accept a selection.
 <div class="divider--half"></div>
 
 

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

@@ -35,7 +35,7 @@
         <ng-content select="igx-hint, [igxHint]"></ng-content>
     </ng-container>
 </igx-input-group>
-<div igxToggle class="igx-drop-down" (mousedown)="mousedownHandler($event);"
+<div igxToggle class="igx-drop-down" [inert]="disabled" (mousedown)="mousedownHandler($event);"
     (appended)="onToggleContentAppended($event)"
     (opening)="handleOpening($event)"
     (opened)="handleOpened()"

projects/igniteui-angular/select/src/select/select.component.spec.ts

@@ -249,6 +249,24 @@ describe('igxSelect', () => {
             expect(select.collapsed).toBeFalsy();
         });
 
+        it('should prevent interaction with the open dropdown while disabled', async () => {
+            select.open();
+            await fixture.whenStable();
+            fixture.detectChanges();
+            const panel = selectList.nativeElement.closest('.igx-drop-down') as HTMLElement;
+
+            expect(select.collapsed).toBeFalsy();
+            expect(panel.inert).toBeFalsy();
+
+            select.setDisabledState(true);
+            fixture.detectChanges();
+            expect(panel.inert).toBeTruthy();
+
+            select.setDisabledState(false);
+            fixture.detectChanges();
+            expect(panel.inert).toBeFalsy();
+        });
+
         it('should close dropdown on item click', async () => {
             const selectedItemEl = selectList.children[2];
             expect(select.collapsed).toBeTruthy();