How to disable or overwrite cdk-focused in Angular

Question

I am working on mat-button-toggle-group for which I modified existing css by overwriting mat-button-toggle-checked class like below. Now, when I toggle between buttons the css is not working till I get focus out and that is because 2 cdk classes 'cdk-focused' and 'cdk-program-focused' are being added when the clicked button is on focus . Is there any way that I can make these classes disable or make them not apply or overwrite them with same css of mat-button-toggle-checked?

<mat-button-toggle-group #group="matButtonToggleGroup" value="line">
    <mat-button-toggle (click)="showLine()" value="line">Line</mat-button-toggle>
    <mat-button-toggle (click)="showChart()" value="chart">Chart</mat-button-toggle>
</mat-button-toggle-group>

and css

mat-button-toggle-group {
    border: solid 1px #d1d8de;
    width:260px;
    height:41px;
    text-align: center;
    .mat-button-toggle-checked{
      background-color: #ffffff;
      font-weight: bold;
    }
    .mat-button-toggle{
      width:50%;
      font-size: 15px;
    }
  }

Solution 1

You can make use of Angular CDK's FocusMonitor service to disable .cdk-focused and .cdk-program-focused classes by calling the service's stopMonitoring() method.

The documentation for this & the API can be found in the following links respectively:
1) FocusMonitor documentation &
2) FocusMonitor API

The problem I had:

My sidenav had 4 buttons created using *ngFor. Each of these buttons was also a routerLink. Only the button whose router link was active should have primary background color.

Now, this was getting confusing if, say, the routerLink associated with my 4th button was active as the 4th button would have the primary background color and the 1st button had focused styling because of .cdk-focused and .cdk-program-focused classes applied by the FocusMonitor on the button.

The solution:

import { Component, AfterViewInit } from '@angular/core';
import { FocusMonitor } from '@angular/cdk/a11y';

@Component({
    selector   : 'test-component',
    templateUrl: 'test-component.template.html',
})

export class TestComponent implements AfterViewInit {
    constructor(private _focusMonitor: FocusMonitor) {}

    ngAfterViewInit() {
        this._focusMonitor.stopMonitoring(document.getElementById('navButton_1'));
    }
}

You can take a look at the documentations for tailoring this to your need.

Solution 2

In my case, the real problem stay in button structure, 'material' build various sub-components and the last one is a 'div' with CSS class 'mat-button-focus-overlay':

My solution is simple, in 'style.css' file, add or subscribe to the 'mat-button-focus-overlay'

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

Solution 3

CSS method for the lazy folks:

.your-elements-class-name:focus {
  outline: 0px solid transparent;
}

Solution 4

The easiest way to get rid of the outline which is created by cdk-focused, cdk-program-focused, cdk-mouse-focused and cdk-touch-focused is by adding

button:focus { outline: none; }

in your styles.css file

Before

After

Solution 5

Simplest "disable" is just to add the following css override to your component.

:host {
  /deep/ .mat-button-toggle-focus-overlay {
    display: none;    
  }
}

View more solutions

Comments

[Ketan Akbari]

have you got rid of that cdk-focused and cdk-program-focused classes?

[aruno]

My situation was a mat-button that opened a mat-dialog still had focus when the dialog was closed. I solved it by automatically calling blur on the button after the dialog was closed - github.com/angular/components/issues/…

[user3154990]

yes I did, and my question is the my css is working but 2 new CDK classes are being added when a toggle button is clicked until it has focus on it 'cdk-focused' and 'cdk-program-focused' are the classes..once the focus is gone my css is applied. Please let me know if there is a way to overwrite cdk classes

[user3154990]

Thanks Don. I already have a custom theme class as you mentioned. But, these are cdk classes

[DonDaniel]

Perfect! You can overwrite those the same way. You can check out how material does it by going to there theme file. Thats in your node_modules/@angular/material/_theming.scss

[Sheri Kwong]

I've learned it was best practice to avoid !important to override styling. It usually means the imports could be done better.

[C Alonso C Ortega]

excelent answer, I had remove focus programmatly as you say 😁