The buttons look and feel like they're being pushed

user_3717426 0
Viewed 211

I'm using Bootstrap4.
The button appears in the footer component.

There is no problem when viewing on a PC, but when viewing on a smartphone, when I press the button, the button stays pressed.
How can I change the display to normal after the button is pressed, the same as on a PC?

app.component.html

<app-header></app-header>
<router-outlet></router-outlet>
<app-footer></app-footer>

footer.component.html

<button (click)="prevPage()" type="button" #prevBtn class="btn btn-block px-sm-3 px-md-5 btn-warning">
  prev <fa-icon [icon]="faAngleRight"></fa-icon>
</button>

footer.component.ts

@ViewChild('prevBtn', { static: false }) prevBtn: ElementRef;
prevPage() {
  this.router.navigate([this.prevHref]);
  this.prevBtn.nativeElement.blur();
}

use

  • Angular 8.2.14
  • Bootstrap 4.3.1

stackblitz

For Android + Chrome, hover? Active? will remain on the button.

enter image description here

bootstrap-4 angular
1 Answers

Simplest way to get rid of this.

Add onclick handler to the button element

onclick="this.blur()"

Hope it helps!

More on this:

This is a very common issue when you are using modals.

I have created a stackblitz to highlight the same issue using Angular Material.

https://stackblitz.com/edit/angular-ivy-qcqwyg

There are two buttons which just open up a dialog. One uses the onclick handler and one does not. You can see the difference when the dialog is closed. The depressed effect remains on the first button. (Tested on Chrome Browser).

The issue probably happens because the blur event is attached to mouseup event. mouseup event fires after the modal dialog is opened which disables all mouse click events for the elements in the background and as such the blur event is never triggered on the button and remains depressed.

Adding the onclick handler ensures that the blur event is executed immediately on click and the button gets released.

This is a common issue if you use Angular Material Schematics to generate a nav. the default navigation created has this issue on the menu button (also referred to as "Hamburger button")

Hope this helps others who may be facing same issues.

user_120562700
Related