Angular Material button remove autofocus

Question

I have the following button

<td mat-cell *matCellDef="let element">
  <button mat-icon-button type="button" (click)="downloadStuff(element)">
    <mat-icon mat-icon matTooltip="{{element.someId}}">picture_as_pdf</mat-icon>
  </button>
</td>

All good but I noticed the little bugger gets outlined by default:

Ok.... CSS lets me remove the annoying outline withe the following:

button:focus {
    outline: none;
}

But then.. I still get this annoying default background focus:

I've tried a few overlay and background-related things in CSS and none of these seemed to address the issue. How do I remove this default background? And why does it behave like this by deafault???

See the selected item in dev tools.

This is normal behavior for Material design as you can see from [this guide](https://material.io/design/interaction/states.html#focus). Have you tried adding `background-color: none;` to your &:focus CSS ? — Jake, Dec 12 '18 at 10:55
Thanks Jake but background-color: none; was one of the first things I tried. — tom33pr, Dec 12 '18 at 11:07
If you use Chrome's DevTool and inspect the element and set it to focus, what CSS is applied ? — Jake, Dec 12 '18 at 12:30
Visual focus indication is an important part of usability. The solution to your problem is to remove focus, not to suppress the focus indicator because that would make for a bad user experience. It happens by default because of something you are doing or something you are using - we need to see how you are using the button to know why. Usually a simple button on a page does not get focus by default (e.g. https://xonklxyamje.angular.stackblitz.io/ code: https://stackblitz.com/angular/xonklxyamje?file=app%2Fbutton-types-example.html). — G. Tranter, Dec 12 '18 at 19:37
I added a copy of the selected button taken from dev tool in Chrome. The button is generated dynamical depending on the number of rows in the table. It is just added to one of the table's cells. — tom33pr, Dec 13 '18 at 08:34
You may be able set `tabindex="-1"` on the button if you want to remove it permanently — bunkerdive, Aug 11 '19 at 03:50

Botond · Answer 1 · 2020-06-22T13:59:01.720

35

After clicking or touching on a Material Design button it stays focused ---> to resolve this, you need to add the following code: onclick="this.blur()"

<button mat-raised-button  onclick="this.blur()" (click)="onEdit()">Edit</button>

or in your case

<td mat-cell *matCellDef="let element">
    <button mat-icon-button type="button" onclick="this.blur()" (click)="downloadStuff(element)">
        <mat-icon mat-icon matTooltip="{{element.someId}}">picture_as_pdf</mat-icon>
    </button>
</td>

edited Jun 22 '20 at 13:59

answered Sep 26 '19 at 11:21

Botond

630
6
9

1

What's the difference between onclick and (click)? – Felipe Centeno Jun 18 '20 at 16:32
Here it was explained bought of with examples. https://www.w3schools.com/jsref/event_onclick.asp – Botond Jun 22 '20 at 13:51
1

It works, but the focus is shown for some miliseconds, then blur, making an ugly effect. I prefer the solution given by Rafique Mohammed – Jose Ramon Garcia Oct 20 '20 at 23:47
This should be the accepted answer. – Dzmitry Alifer Mar 06 '22 at 21:59

score 31 · Answer 2 · edited Mar 04 '19 at 15:26

31

In my case the real problem was the button structure. Angular Material builds various sub components and the last one is a 'div' with css class mat-button-focus-overlay:

My solution is simply. In style.css add or overwrite the mat-button-focus-overlay:

.mat-button-focus-overlay {
    background-color: transparent!important;
}

edited Mar 04 '19 at 15:26

frido

13,065
5
42
56

answered Mar 04 '19 at 14:42

Pablo M.

494
7
14

score 14 · Answer 3 · answered Aug 07 '19 at 14:14

14

I was able to get rid of the default focused button by setting the attribute cdk-focus-start on other item. More info available here

answered Aug 07 '19 at 14:14

Tiago Cardoso

377
1
3
9

6

Thanks. Sent me in the right direction for my problem. FYI, `cdk-focus-start` deprecated, use `cdkFocusRegionstart` instead. – Tim Harker Nov 22 '19 at 00:19

score 7 · Answer 4 · answered May 02 '20 at 19:34

7

In your styles css, just add this code. It will remove those annoying outline from all the buttons

button:focus {
    outline: none !important;
}

answered May 02 '20 at 19:34

Rafique Mohammed

3,666
2
38
43

I suppose there is a better solution to this, because the examples in https://material.angular.io/components/button/overview don't use this, but it works! – Jose Ramon Garcia Oct 20 '20 at 23:43

score 6 · Answer 5 · edited Feb 10 '21 at 08:07

6

Also try this.

<button mat-icon-button [autofocus]="false" (click)="closeDialog()">
  <mat-icon>clear</mat-icon>
</button>`

Just add [autofocus].

edited Feb 10 '21 at 08:07

Falko

17,076
13
60
105

answered Aug 07 '19 at 02:24

1

or you may put on the . – Aug 15 '19 at 01:21

score 3 · Answer 6 · answered Dec 14 '20 at 06:20

3

Use this to remove both outline and auto focus in your .css:

button {
  outline: none;
}

::ng-deep .mat-button-focus-overlay {
  display: none;
}

answered Dec 14 '20 at 06:20

Dulanka

139
9

score 3 · Answer 7 · answered Dec 28 '20 at 10:43

3

Question is somewhat old. But I found a better solution for this.

Add tabindex="-1" to the button tag and problem solved!

<button tabindex="-1" mat-icon-button type="button" (click)="downloadStuff(element)">
    <mat-icon mat-icon matTooltip="{{element.someId}}">picture_as_pdf</mat-icon>
</button>

answered Dec 28 '20 at 10:43

Lasantha Ekanayake

59
3

4

This is not a better solution. You are removing keyboard navigation of tab. – Rafique Mohammed Jan 04 '21 at 11:24
Thanks, a real solution among all these "why not fix the global styles to remove the initial focus, great idea" – lucifer63 Dec 26 '21 at 00:16

score 0 · Answer 8 · answered Nov 02 '21 at 12:16

0

for :focus, :cdk-keyboard-focus and so on, you can remove box-shadow

box-shadow: none;

answered Nov 02 '21 at 12:16

pinarella

805
8
16

score 0 · Answer 9 · answered Jun 23 '22 at 14:40

0

Put the following css code in your outermost style file.

.mat-focus-indicator::before {
border-color: transparent !important; }

answered Jun 23 '22 at 14:40

Ali Yıldızöz

389
2
12

score 0 · Answer 10 · answered Oct 03 '22 at 11:56

0

So I just add cdkFokusInitial on the submit button or something else

answered Oct 03 '22 at 11:56

AF2828

1

As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – ethry Oct 06 '22 at 20:13

Angular Material button remove autofocus

10 Answers10