CODEWITHSUNDEEP
cssbuttonangular-materialdefault
tom33pr
tom33pr

Reputation: 1023

Angular Material button remove autofocus

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:

enter image description here

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:

enter image description here

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. enter image description here

Upvotes: 36

Views: 65177

Answers (11)

AF2828
AF2828

Reputation: 11

If you don't want the focus to be on the close icon, one solution is that you make it focus on the 'Save' or 'Cancel' button initially. To do this, you need to add cdkFocusInitial in the button. For ex:

<div mat-dialog-actions>
   <button mat-flat-button>Cancel</button>
   <button mat-flat-button cdkFocusInitial>Submit</button>
</div>

Upvotes: 1

Thibaut Bernard
Thibaut Bernard

Reputation: 1

I solved this by following (sort of) the Accessibility section of Angular Material.

Here is my AppComponent:

export class AppComponent implements AfterViewInit {
    @ViewChild("appContainer") appContainer: ElementRef<HTMLElement>;

    appContainerOrigin = this._formatOrigin(null);

    constructor(
        private _focusMonitor: FocusMonitor,
        private _cdr: ChangeDetectorRef,
        private _ngZone: NgZone,
    ) {}

    ngAfterViewInit(): void {
        this._focusMonitor.monitor(this.appContainer, true).subscribe((origin) =>
            this._ngZone.run(() => {
                this.appContainerOrigin = this._formatOrigin(origin);
                this._cdr.markForCheck();
            }),
        );
    }

    private _formatOrigin(origin: FocusOrigin): string {
        return origin ? origin + " focused" : "blurred";
    }
}

Its template:

<div #appContainer class="app-container">
    <app-header></app-header>

    <div class="content-container">
        <router-outlet></router-outlet>
    </div>

    <app-footer></app-footer>
</div>

And the styles.scss file at the root of the project:

.cdk-mouse-focused *:focus {
    --mdc-list-list-item-focus-state-layer-color: none;
}

FocusMonitor adds a CSS class to the .app-container div which tells you how the focus was made. I then remove the color layer associated to the focus from the focused element if it was made by a mouse click. That way you get the same behavior as the Angular Material doc, as you can see in the Buttons doc. I don't think the Angular Material team implemented it like that, and I also don't think that's the ideal way to achieve it (a simple directive built in Angular Material by default would be nice) but it's the closest I could get from the expected behavior.

Upvotes: 0

Ali Yıldız&#246;z
Ali Yıldız&#246;z

Reputation: 438

Put the following css code in your outermost style file.

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

Upvotes: 0

pinarella
pinarella

Reputation: 895

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

box-shadow: none;

Upvotes: 0

user10292634
user10292634

Reputation:

Also try this.

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

Just add [autofocus].

Upvotes: 6

Lasantha Ekanayake
Lasantha Ekanayake

Reputation: 89

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>

Upvotes: 6

Dulanka
Dulanka

Reputation: 149

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

button {
  outline: none;
}

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

Upvotes: 4

Botond
Botond

Reputation: 690

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>

Upvotes: 38

Rafique Mohammed
Rafique Mohammed

Reputation: 3816

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

button:focus {
    outline: none !important;
}

Upvotes: 7

Tiago Cardoso
Tiago Cardoso

Reputation: 377

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

Upvotes: 15

Pablo M.
Pablo M.

Reputation: 492

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;
}

Upvotes: 30

Related Questions