Angular Material mat-select keyboard up/down not working - angular-material2

Question

Angular Material Library being consumed as a module in my project.
I use other couple of angular material components as well but this seems to be the issue with autocomplete options and select component options.
Material module:
import { NgModule } from '#angular/core';
import {
MatAutocompleteModule,
MatButtonModule,
MatButtonToggleModule,
MatCardModule,
MatCheckboxModule,
MatChipsModule,
MatDatepickerModule,
MatDialogModule,
MatExpansionModule,
MatFormFieldModule,
MatGridListModule,
MatIconModule,
MatInputModule,
MatListModule,
MatMenuModule,
MatPaginatorModule,
MatProgressBarModule,
MatProgressSpinnerModule,
MatRadioModule,
MatSelectModule,
MatSidenavModule,
MatSliderModule,
MatSlideToggleModule,
MatSnackBarModule,
MatSortModule,
MatTableModule,
MatTabsModule,
MatToolbarModule,
MatTooltipModule,
MatStepperModule,
} from '#angular/material';
import { MatNativeDateModule, MatRippleModule } from '#angular/material';
import { CdkTableModule } from '#angular/cdk/table';
import { A11yModule } from '#angular/cdk/a11y';
import { OverlayModule } from '#angular/cdk/overlay';
import { PlatformModule } from '#angular/cdk/platform';
import { ObserversModule } from '#angular/cdk/observers';
import { PortalModule } from '#angular/cdk/portal';
#NgModule({
exports: [
MatAutocompleteModule,
MatButtonModule,
MatButtonToggleModule,
MatCardModule,
MatCheckboxModule,
MatChipsModule,
MatTableModule,
MatDatepickerModule,
MatDialogModule,
MatExpansionModule,
MatFormFieldModule,
MatGridListModule,
MatIconModule,
MatInputModule,
MatListModule,
MatMenuModule,
MatPaginatorModule,
MatProgressBarModule,
MatProgressSpinnerModule,
MatRadioModule,
MatRippleModule,
MatSelectModule,
MatSidenavModule,
MatSlideToggleModule,
MatSliderModule,
MatSnackBarModule,
MatSortModule,
MatStepperModule,
MatTabsModule,
MatToolbarModule,
MatTooltipModule,
MatNativeDateModule,
CdkTableModule,
A11yModule,
ObserversModule,
OverlayModule,
PlatformModule,
PortalModule,
]
})
export class MaterialModule { }
Package.json:
"dependencies": {
"#angular/animations": "5.0.4",
"#angular/cdk": "5.0.0-rc.2",
"#angular/common": "5.0.4",
"#angular/compiler": "5.0.4",
"#angular/core": "5.0.4",
"#angular/forms": "5.0.4",
"#angular/http": "5.0.4",
"#angular/material": "5.0.0-rc.2",
"#angular/platform-browser": "5.0.4",
"#angular/platform-browser-dynamic": "5.0.4",
"#angular/router": "5.0.4",
"#swimlane/ngx-charts": "7.0.1",
"angular2-csv": "^0.2.5",
"classlist.js": "^1.1.20150312",
"core-js": "^2.4.1",
"d3": "4.9.1",
"dom-to-image": "2.5.2",
"intl": "^1.2.5",
"enhanced-resolve": "3.3.0",
"moment": "2.13.0",
"ngx-bootstrap": "2.0.0-beta.9",
"ngx-uploader": "4.2.1",
"pdfjs-dist": "2.0.129",
"rxjs": "5.5.2",
"tinymce": "4.7.1",
"web-animations-js": "^2.3.1",
"zone.js": "^0.8.12"
},
Html File
<mat-form-field class="w-100">
<mat-select name="chart-type" (change)="onChangeChartType()" placeholder="Select Type"
[(ngModel)]="openedCellConfig.type" style="font-size: 14px;" required="true">
<mat-option *ngFor="let opt of chartOptions" [value]="opt.key">{{opt.value}}</mat-option>
</mat-select>
</mat-form-field>
When I hit enter on mat-select it opens up but the key up and down arrow keys are not working.
Can anybody help on this as what I am missing to include?

Answer 1

It sounds like a library conflict. I do not know if this is will resolve your issue but a big problem my development team had when using Angular Material is that the mat-select keyboard navigation suddenly did not work. Our problem we found was actually in the angular-cli.json file.
We had referenced scripts for bootstrap.js to be loaded which apparently had some type of conflict with the material libraries. There was no error logged of this anywhere, but removing it from the scripts restored the keyboard nav functionality for the material selects in our case. We also had jquery as well which we didnt need lol So I would try looking there and see if there is something there that doesn't make sense. Maybe posting your angular-cli.json file could help us identify the issue as well.
The code snippet below is what caused our issue:
"scripts": [
"../node_modules/jquery/dist/jquery.min.js",
"../node_modules/bootstrap/dist/js/bootstrap.js"
],

Answer 2

I was facing the issue with my mat-select when using with bootstrap js.
I was using bootstrap js v3.3.2 and I updated it to v4.1.2 which resolved the issue of up/ down arrow keys with mat-select. After updating you might gonna need to fix few css for modal or even you can update the bootstrap.css as well.
Hope this may help you!

Answer 3

I had the same problem as above. I upgrade to bootstrap 4.1.3 and still nothing worked. What was causing this for me was this style put on the mat-select.
.mat-select {
display: contents !important;
}
Removed all instance of it in my css files and everything worked as expected.