diff --git a/src/lib/select/select.html b/src/lib/select/select.html
index ebe94cefc8c..e245663e433 100644
--- a/src/lib/select/select.html
+++ b/src/lib/select/select.html
@@ -37,7 +37,8 @@
(@transformPanel.done)="_onPanelDone()"
[style.transformOrigin]="_transformOrigin"
[class.mat-select-panel-done-animating]="_panelDoneAnimating"
- [style.font-size.px]="_triggerFontSize">
+ [style.font-size.px]="_triggerFontSize"
+ (keydown)="_handleKeydown($event)">
{
expect(pane.style.minWidth).toBe('200px');
}));
-
-
it('should not attempt to open a select that does not have any options', fakeAsync(() => {
fixture.componentInstance.foods = [];
fixture.detectChanges();
@@ -771,8 +769,6 @@ describe('MatSelect', () => {
expect(fixture.componentInstance.select.panelOpen).toBe(false);
}));
-
-
it('should close the panel when tabbing out', fakeAsync(() => {
trigger.click();
fixture.detectChanges();
@@ -787,6 +783,21 @@ describe('MatSelect', () => {
expect(fixture.componentInstance.select.panelOpen).toBe(false);
}));
+ it('should close when tabbing out from inside the panel', fakeAsync(() => {
+ trigger.click();
+ fixture.detectChanges();
+ flush();
+
+ expect(fixture.componentInstance.select.panelOpen).toBe(true);
+
+ const panel = overlayContainerElement.querySelector('.mat-select-panel')!;
+ dispatchKeyboardEvent(panel, 'keydown', TAB);
+ fixture.detectChanges();
+ flush();
+
+ expect(fixture.componentInstance.select.panelOpen).toBe(false);
+ }));
+
it('should focus the first option when pressing HOME', fakeAsync(() => {
fixture.componentInstance.control.setValue('pizza-1');
fixture.detectChanges();
diff --git a/src/lib/select/select.ts b/src/lib/select/select.ts
index 8a5ca8def27..5e8b8b76f20 100644
--- a/src/lib/select/select.ts
+++ b/src/lib/select/select.ts
@@ -469,6 +469,8 @@ export class MatSelect extends _MatSelectMixinBase implements AfterContentInit,
_parentFormGroup, ngControl);
if (this.ngControl) {
+ // Note: we provide the value accessor through here, instead of
+ // the `providers` to avoid running into a circular import.
this.ngControl.valueAccessor = this;
}