Anchor button stays rendered selected after click #1405

Closed
garyns opened this Issue Apr 8, 2011 · 12 comments

8 participants

@garyns

With the current repository code anchors with data-role=button are staying 'selected' (blue) after they are clicked. Input buttons are fine.

<div data-role="page">
  <div data-role="content">
    <a data-role="button" href="#">Anchor Button - Stays Selected</a>
    <input type="button" value="Input Button - OK">
  </div>
</div>

Whether this is another difference in handling for anchors (like a visited state) and buttons I'll leave for debate. In any case anchors initiating a JS call in a multi-page model always render selected after their first press.

@garyns

Interestingly, if the JS function returns false, the anchor reverts back to its unselected state on Safari/Chrome desktop. However on the iPad (iOS 4.3) it always remains in the selected/presses state.

@garyns

Its only been happening since I did a git pull this morning. in jquery.mobile.navigation.js, the addition of this line causes it:

//add active state on vclick
    $( "a" ).live( "vclick", function(){
        $(this).closest( ".ui-btn" ).not( ".ui-disabled" ).addClass( $.mobile.activeBtnClass );
    });
@shawnbierman

Experiencing the same issue in Safari/Win7 and on DroidX. The ui-btn-active class isn't being removed.

@shawnbierman

Sorry, should have included that I am using JQM a4.1 and jQuery 1.5.2

@chasetec

Also seeing issue with ui-btn-active not being removed on Alpha4.1. Links with just data-role="button" have no problem but if you add data-rel="back" then that button will stay active. Notice the issue also happens with the generated back button in the header.

Demo here http://jsbin.com/apelu5/

@shawnbierman

A quick workaround until it is resolved.

$("div").live("pagebeforehide", function(e) {
$(".dashboardListItemClickable").removeClass("ui-btn-active");
});

@fabapps

Based on your workaround, I did this:

// workaround for active button state
var resetbutton = function(buttonname) {
$(buttonname).removeClass("ui-btn-active");
}

Then added the function call into any click events that would have put the button into its pressed state:
$("#homelink").click( function(e) { resetbutton(this); e.preventDefault(); } );

@florianbachmann

please fix this, it looks annoying ;-)

@gseguin gseguin added a commit that referenced this issue Aug 18, 2011
@gseguin gseguin Fix for issue #1405: Moved assignment of $activeClickedLink to the vc…
…lick handler in charge of adding the active state
9f3836e
@gseguin gseguin added a commit that referenced this issue Aug 18, 2011
@gseguin gseguin Added unit tests for issue #1405 e39a320
@gseguin gseguin closed this Aug 18, 2011
@timmywil timmywil pushed a commit that referenced this issue Oct 24, 2011
@gseguin gseguin Fix for issue #1405: Moved assignment of $activeClickedLink to the vc…
…lick handler in charge of adding the active state
38d2520
@timmywil timmywil pushed a commit that referenced this issue Oct 24, 2011
@gseguin gseguin Added unit tests for issue #1405 928b957
@suewonjp

Sorry, this issue is really closed? I've run into the same issue on the version 1.4.5 (the latest)

The problem seems that buttons are remained focused after event of click or touchstart or tap or vclick or whatever.

So first I thought, it would be ok if I call blur() at the time of touchend, but it didn't work as I expected.

$("#new-nmb-btn").on("touchstart", function(e) {
})
.on("touchend", function(e) {
    $(this).blur(); // doesn't work!
});

Interestingly, when I called blur() from the development console of my browser, it did work!

So I decided to call blur() with setTimeout() like so and it worked:

$("#new-nmb-btn").on("touchstart", function(e) {
    setTimeout(function() {
        $("#new-nmb-btn").blur(); // Works... but I should do this every time?
    }, 800);
});

Looks like buttons get focused again after some time, because my call of blur() inside touchend event didn't work.


tested platform : Android emulator, Chrome browser:

userAgent:

"Mozilla/5.0 (Linux; Android 6.0; PREVIEW - Google Nexus 5X - 6.0.0 - API 23 - 1080x1920 Build/MRA58K) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/40.0.0.0 Mobile Safari/537.36"

using Phonegap (v 5.4.0), jQuery (2.2.0), jQuery mobile(1.4.5)

dev OS: OS X Mavericks

@suewonjp

I tested the issue with another latest browser on a real android device;

The button still stays focused after clicked or touched.

The user agent string from the latest Chrome browser:

"Mozilla/5.0 (Linux; Android 6.0.1; Nexus 5 Build/MMB29S; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/47.0.2526.100 Mobile Safari/537.36"

@arschmitz
jQuery Foundation member

@suewonjp we have completely re-written in button widget in the upcoming version it no longer shares any code or markup with the current button

@suewonjp

Thanks... I'll look forward to your new widget...

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment