Mat-Select issue with bootstrap 4.1.3 & jquery 3.3.1

[ssonnenwald]

Bug, feature request, or proposal:

When using bootstrap 4.1.3 and jquery 3.3.1 the can not gain focus or use any of the keyboard selection options like up or down arrows to move the selection within the dropdown.

What is the expected behavior?

The expected behavior is that the should be able to gain focus and use the keyboard shortcuts to make a selection within the dropdown.

What is the current behavior?

The current behavior is that the can not gain focus by tabbing to it or when the list is dropped down can anyone use the keyboard shortcuts to move to the desired item in the dropdown.

What are the steps to reproduce?

Providing a StackBlitz reproduction is the best way to share your issue.
StackBlitz starter: https://goo.gl/wwnhMV

What is the use-case or motivation for changing an existing behavior?

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Browser: Chrome Version 68.0.3440.106 (Official Build) (64-bit)

{ "name": "", "version": "1.0.0", "scripts": { "ng": "ng", "start": "ng serve", "build": "ng build", "test": "ng test", "lint": "ng lint", "e2e": "ng e2e" }, "private": true, "dependencies": { "@angular/animations": "^6.1.2", "@angular/cdk": "^6.4.3", "@angular/common": "^6.0.3", "@angular/compiler": "^6.0.3", "@angular/core": "^6.0.3", "@angular/forms": "^6.0.3", "@angular/http": "^6.0.3", "@angular/material": "^6.4.3", "@angular/platform-browser": "^6.0.3", "@angular/platform-browser-dynamic": "^6.0.3", "@angular/router": "^6.0.3", "@auth0/angular-jwt": "^2.0.0", "ajv": "^6.5.2", "bootstrap": "^4.1.3", "core-js": "^2.5.4", "hammerjs": "^2.0.8", "jquery": "^3.3.1", "minipass": "^2.2.4", "mkdirp": "^0.5.1", "ngx-mask": "^6.0.0", "popper.js": "^1.14.4", "rxjs": "^6.0.0", "tslib": "^1.9.3", "zone.js": "^0.8.26" }, "devDependencies": { "@angular-devkit/build-angular": "~0.6.8", "@angular/cli": "~6.0.8", "@angular/compiler-cli": "^6.0.3", "@angular/language-service": "^6.0.3", "@types/jasmine": "~2.8.6", "@types/jasminewd2": "~2.0.3", "@types/jquery": "^3.3.4", "@types/node": "^10.5.2", "codelyzer": "^4.4.2", "jasmine-core": "^3.1.0", "jasmine-spec-reporter": "~4.2.1", "karma": "^2.0.4", "karma-chrome-launcher": "~2.2.0", "karma-coverage-istanbul-reporter": "~2.0.0", "karma-jasmine": "~1.1.1", "karma-jasmine-html-reporter": "^1.2.0", "protractor": "~5.3.0", "ts-node": "^7.0.0", "tslint": "^5.11.0", "typescript": "~2.7.2" } }

Is there anything else we should know?

Here is another reference to the same problem: https://stackoverflow.com/questions/47673377/angular-material-mat-select-keyboard-up-down-not-working

If you remove these lines from the angular.json file it works: "scripts": [
"node_modules/jquery/dist/jquery.min.js", -- Remove
"node_modules/popper.js/dist/umd/popper.min.js", "node_modules/bootstrap/dist/js/bootstrap.min.js" -- Remove
]

[ssonnenwald]

This seems to be the style that is causing the issue:

.mat-select { display: contents !important; }

[julianobrasil]

@ssonnenwald, I'm not supposed to answer on behalf of Material team, but I suspect it's not a requirement that material do not interfere with other css libraries (I use bootstrap myself, but just some of the css part because of the out-of-the-box table styling). Isn't it possible to get rid of the bootstrap javascript part?

[ssonnenwald]

True, and I don't know if this issue needs addressed or not, but I just removed the styling I have above and it all worked. Taking bootstrap out of the equation isn't an option here.

[crisbeto]

display: contents definitely isn't something that Material has added (there are zero occurrences of it in the codebase) and in general we don't do fixes for issues with other libraries that are used together with Material, because it would be impractical.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}