Bootstrap button click in mobile 'sticks'

1

With bootstrap buttons on mobile they stay ’ clicked down’ and don’t ‘come up’ until you manually click elsewhere.

I have done some searching but all these attempts fail

$(".btn").mouseup(function() {
$.jGrowl(' did it happen');
// Removes focus of the button. to make th button in mobole come back up
$(this).blur();  // should remove the focus on the selected button
$(Button1).blur(); 
$( "#btnJoinRoom1" ).trigger( "click" ); //set the focus elsewhere 
$( "#txtFingerPrint" ).focus(); //set the focus elsewhere 
$( "#txtFingerPrint" ).keydown(); //set the focus elsewhere 
});

Cheers

Steve Warby

2

Does this happen on the desktop too?

The button has focus until you tap elsewhere. Do this to cancel it in code:

SetTimeout("Button1.blur()",10)

This way, the blur happens after the click is complete.

3

The problem doesn’t occur on desktop.
I am using BS theme slate.
On mobile I get 2 different results.

On android
When clicked on I see the button change colour and an orange border.
When the time out happens the border disappears.
The colour change remains until I click elsewhere then it is restored.
On IOS
When clicked on I see the button change colour.
When the time out happens the border disappears.
The colour change remains until I click elsewhere then it is restored.

So the blur seems to 'partly ’ happen;

Is there a ‘reset’ to original bit of magic.

Cheers

Steve Warby

4

Did you manage to look at this ?

Cheers

Steve Warby.

5

There are two issues here, focus and hover. George’s suggestion addresses the focus issue by blurring the control, which is effective on both mobile and desktop. But neither Android nor iOS remove hover from a tapped control, which for BS use results in an appearance similar to focus, but slightly different. So additional effort on mobile is needed.

Various user workarounds abound due to BS electing not to wade in with hacks (at least for now).

Here’s one solution you may find helpful; it works on both desktop and mobile for me:

$(".btn").on("click", function() {
  $(this).blur(); // basically George's solution, but for all BS buttons
});
$(".btn").on("touchstart", function() {
  $(this).removeClass("mobileHoverFix");
});
$(".btn").on("touchend", function() {
  $(this).addClass("mobileHoverFix");
});

Then, in Project CSS, create that class but apply it only on the hover state:

.mobileHoverFix:hover,
.mobileHoverFix.hover {
  background-color: #337ab7;
}

I used jQuery/JS format for my code above since your attempts were also in that format.

Note that the background color I chose matches the default BS btn-primary color. You’ll want to adjust that for your own needs.

Note too that I elected to match all BS buttons for the touchstart/end code. You may only want to match specific controls rather than paint with such a wide brush.

Kind regards,
Doug