Components: When I click on mat-buttons a blue highlight frame appears on them.

[PitkaGuru]

Bug, feature request, or proposal:

When I click on any type of mat-button a blue highlight frame appears on the button and I have to click somewhere else to pick that off.

My example button:

<button mat-button color="warn" (click)="clearAll()">
  <mat-icon>close</mat-icon>
</button>

What is the expected behavior?

On the Angular Material website the buttons don't have any kind of blue highlight frame after clicking on them.
https://v6.material.angular.io/components/button/examples

What is the current behavior?

All Angular Material 6 buttons after clicking on them a blue highlight frame appears.

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

I'm using Win10, Chrome, Angular 6, Angular Material 6.4.7, Bootstrap 4

package.json

{
"name": "humvo",
"version": "0.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.9",
"@angular/cdk": "^6.4.7",
"@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.7",
"@angular/platform-browser": "^6.0.3",
"@angular/platform-browser-dynamic": "^6.0.3",
"@angular/router": "^6.0.3",
"bootstrap": "^4.1.3",
"core-js": "^2.5.4",
"hammerjs": "^2.0.8",
"rxjs": "^6.0.0",
"zone.js": "^0.8.26"
},
"devDependencies": {
"@angular/compiler-cli": "^6.0.3",
"@angular-devkit/build-angular": "~0.6.8",
"typescript": "~2.7.2",
"@angular/cli": "~6.0.8",
"@angular/language-service": "^6.0.3",
"@types/jasmine": "~2.8.6",
"@types/jasminewd2": "~2.0.3",
"@types/node": "~8.9.4",
"codelyzer": "~4.2.1",
"jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~1.7.1",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.0",
"karma-jasmine": "~1.1.1",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.3.0",
"ts-node": "~5.0.1",
"tslint": "~5.9.1"
}
}

[josephperrott]

This outline is likely caused by the css styling for the button's outline. The .mat-button style rules define outline: 0 but it is possible that you are overriding it in your applications CSS.

[PitkaGuru]

It was the Bootstrap 4 css.

I had to put the following css into my styles.css:

button:focus, button:active:focus, button.active:focus {
outline: none !important;
outline-style: none !important;
}

[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._}