CODEWITHSUNDEEP
javascriptangularangular-materialangular-material2
user944513
user944513

Reputation: 12729

how to remove autofocus in angular?

I am using angular 6 with angular material design.I make simple application of slidebar with toggle menu icon. I am facing one issue .whenever I am selection any item from slidebar menu currently I have 3 items select any item .It close my slide bar navigation , but my menu button is auto focus .

here is my code

https://stackblitz.com/edit/angular-353qur?file=src%2Fapp%2Fcontactmanager%2Fcomponents%2Ftoolbar%2Ftoolbar.component.html

enter image description here

Steps to reproduce this bug

  1. Select menu button or icon .it shows sidebar having three option.
  2. Select any option it close sidebar and menu icon is auto focus .why ??

I want to remove auto focus after selection of item from sidebar

Update

Please check on mobile .click on F12 and selection mobile. please check on small device

const SMALL_WIDTH_BREAKPOINT = 560;

Important point

you will only reproduce this bug when you output window in less than 500px

Upvotes: 1

Views: 7251

Answers (2)

Srinivasan Kasiram
Srinivasan Kasiram

Reputation: 94

add the below style in styles.css

// remove blue border focus
button:focus {
    outline: none !important;
}

Upvotes: 1

SFernando
SFernando

Reputation: 1124

you have to remove css hover effect. add a class to the mat-button ('no-hover')

<button mat-button (click)="toggleSidenav.emit()" class="sidenav-toggle no-hover">
    <mat-icon>menu</mat-icon>
</button>

and inside template css

.mat-button.no-hover ::ng-deep .mat-button-focus-overlay {
  background: none;
}

Upvotes: 0

Related Questions