Blur HTML button immediately on mobile browsers

Question

I have this issue. I am using a few buttons as toggle switches for selecting and unselecting checkboxes in a friendly way. Works great on desktop, but on my android (haven't tested iPhone yet) the buttons remain 'focused' until you click something else which screws with my user experience big-time.

I've read a lot about this issue but I have yet to find a solution and thought I'd ask my own question.

EDITED HTML:

<div class="service-option">
  <input type="checkbox">
  <button class="btn btn-sm btn-outline-secondary service-option" type="button">
      Option One
  </button>
</div>

<div class="service-option">
  <input type="checkbox">
  <button class="btn btn-sm btn-outline-secondary service-option" type="button">
      Option Two
  </button>
</div>

And my jQuery that just marks the button's checkbox as checked (and hides it from the user) and toggles it to be btn-secondary instead of btn-outline-secondary for visuals.

EDITED JQUERY:

$('.service-option').find('input[type=checkbox]').css("display", "none");
$('.service-option button').click(function() {
    $(this).toggleClass('btn-secondary').toggleClass('btn-outline-secondary');
    var checkbox = $(this).parent().find('input[type=checkbox]');
    checkbox.prop("checked", !checkbox.prop("checked"));
  });

I have tried a lot of different things including .blur() inside that click function but that didn't work either. On mobile devices, it just stays in a state of "greyish background" until I click elsewhere on the screen and that makes it appear to the user that they have not unselected the button when in fact it did...

Was reading here but maybe I missed something: How to stop buttons from staying depressed with Bootstrap 3

Not posting as an answer because this is a crappy solution... try making an invisible empty button before it? — Robert Moore
input within button is invalid. input attribute multiple is invalid. You have to fix these first. — Kosh
:multiple => true is being used for my rails application where this HTML is being generated to enable multiple checkboxes to be selected to my knowledge. — Taylor A. Leach

Taylor A. Leach Taylor A. Leach · Accepted Answer · 2018-02-23T16:23:03

The issue is that on mobile devices, the :hover pseudo-class remains active on an element when you touch it making it appear to be in a 'focused' state. This has been a problem for a long time and there isn't a magic bullet when it comes to solving it. I solved my problem using new media queries and wrapping my custom CSS in:

@media (hover:hover) {
    [...]
}

http://www.javascriptkit.com/dhtmltutors/sticky-hover-issue-solutions.shtml

Is where I found information surrounding the problem.

Blur HTML button immediately on mobile browsers

1 Answers