diff --git a/CHANGELOG.md b/CHANGELOG.md index bf83fc33a69..853cd5c8617 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 +- `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`. diff --git a/projects/igniteui-angular/select/README.md b/projects/igniteui-angular/select/README.md index 0743d29e2a2..9c7bb58701c 100644 --- a/projects/igniteui-angular/select/README.md +++ b/projects/igniteui-angular/select/README.md @@ -76,6 +76,8 @@ You can disable select using the following code: ```html ``` + +If the dropdown is open when the select becomes disabled, it cannot receive focus or accept a selection.
diff --git a/projects/igniteui-angular/select/src/select/select.component.html b/projects/igniteui-angular/select/src/select/select.component.html index 4817f605321..4e0ff3d0a38 100644 --- a/projects/igniteui-angular/select/src/select/select.component.html +++ b/projects/igniteui-angular/select/src/select/select.component.html @@ -35,7 +35,7 @@ -
{ 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();