angular 5 disable cdk focus state on mobile

Question

There's a bug (I guess) on mobile, which when you click on side nav menu and then select a route to go to, it closes the sidenav but leaves the menu button in focus state. Also happens with buttons that open modals, or actually with anything that has focus state (side nav, nav items, buttons and more..)

you can see it happens in the angular material side nav example (simulate mobile device): https://stackblitz.com/angular/brrokxxmqvrn?file=app%2Fsidenav-autosize-example.ts

Or you can see the screenshot below (the toggle sidenav button is focused after I clicked on it)

I would like to know how to disable the cdk focus state on mobile (or under certain condition) on angular 5

Answer 1

What I ended up doing to remove the effect is using the following css:

.mat-button,
.mat-icon-button {
  &.cdk-focused,
  &.cdk-program-focused {
    background-color: none !important;

    .mat-button-focus-overlay {
      display: none !important;
    }
  }
}