Skip to content

Commit 0d233b2

Browse files
crisbetojelbourn
authored andcommitted
fix(select): handle keyboard events from inside panel (#9361)
After the switch to using `aria-describedby` for managing the highlights in `mat-select`, all of the keyboard handling was moved to the select trigger, however this doesn't account for the cases where focus makes it inside the panel (e.g. when toggling options in `multiple` mode).
1 parent f6a59cd commit 0d233b2

File tree

3 files changed

+19
-5
lines changed

3 files changed

+19
-5
lines changed

src/lib/select/select.html

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,8 @@
3737
(@transformPanel.done)="_onPanelDone()"
3838
[style.transformOrigin]="_transformOrigin"
3939
[class.mat-select-panel-done-animating]="_panelDoneAnimating"
40-
[style.font-size.px]="_triggerFontSize">
40+
[style.font-size.px]="_triggerFontSize"
41+
(keydown)="_handleKeydown($event)">
4142

4243
<div
4344
class="mat-select-content"

src/lib/select/select.spec.ts

Lines changed: 15 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -759,8 +759,6 @@ describe('MatSelect', () => {
759759
expect(pane.style.minWidth).toBe('200px');
760760
}));
761761

762-
763-
764762
it('should not attempt to open a select that does not have any options', fakeAsync(() => {
765763
fixture.componentInstance.foods = [];
766764
fixture.detectChanges();
@@ -771,8 +769,6 @@ describe('MatSelect', () => {
771769
expect(fixture.componentInstance.select.panelOpen).toBe(false);
772770
}));
773771

774-
775-
776772
it('should close the panel when tabbing out', fakeAsync(() => {
777773
trigger.click();
778774
fixture.detectChanges();
@@ -787,6 +783,21 @@ describe('MatSelect', () => {
787783
expect(fixture.componentInstance.select.panelOpen).toBe(false);
788784
}));
789785

786+
it('should close when tabbing out from inside the panel', fakeAsync(() => {
787+
trigger.click();
788+
fixture.detectChanges();
789+
flush();
790+
791+
expect(fixture.componentInstance.select.panelOpen).toBe(true);
792+
793+
const panel = overlayContainerElement.querySelector('.mat-select-panel')!;
794+
dispatchKeyboardEvent(panel, 'keydown', TAB);
795+
fixture.detectChanges();
796+
flush();
797+
798+
expect(fixture.componentInstance.select.panelOpen).toBe(false);
799+
}));
800+
790801
it('should focus the first option when pressing HOME', fakeAsync(() => {
791802
fixture.componentInstance.control.setValue('pizza-1');
792803
fixture.detectChanges();

src/lib/select/select.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -469,6 +469,8 @@ export class MatSelect extends _MatSelectMixinBase implements AfterContentInit,
469469
_parentFormGroup, ngControl);
470470

471471
if (this.ngControl) {
472+
// Note: we provide the value accessor through here, instead of
473+
// the `providers` to avoid running into a circular import.
472474
this.ngControl.valueAccessor = this;
473475
}
474476

0 commit comments

Comments
 (0)