New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Anchor button stays rendered selected after click #1405

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

Comments

Projects
None yet
8 participants
@garyns

garyns commented Apr 8, 2011

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

This comment has been minimized.

Show comment
Hide comment
@garyns

garyns Apr 8, 2011

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 commented Apr 8, 2011

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

This comment has been minimized.

Show comment
Hide comment
@garyns

garyns Apr 8, 2011

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 );
    });

garyns commented Apr 8, 2011

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

This comment has been minimized.

Show comment
Hide comment
@shawnbierman

shawnbierman Apr 11, 2011

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

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

@shawnbierman

This comment has been minimized.

Show comment
Hide comment
@shawnbierman

shawnbierman Apr 11, 2011

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

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

@chasetec

This comment has been minimized.

Show comment
Hide comment
@chasetec

chasetec Apr 16, 2011

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/

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

This comment has been minimized.

Show comment
Hide comment
@shawnbierman

shawnbierman Apr 29, 2011

A quick workaround until it is resolved.

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

A quick workaround until it is resolved.

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

@fabapps

This comment has been minimized.

Show comment
Hide comment
@fabapps

fabapps May 6, 2011

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(); } );

fabapps commented May 6, 2011

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

This comment has been minimized.

Show comment
Hide comment
@florianbachmann

florianbachmann Aug 7, 2011

please fix this, it looks annoying ;-)

please fix this, it looks annoying ;-)

gseguin added a commit that referenced this issue Aug 18, 2011

Fix for issue #1405: Moved assignment of $activeClickedLink to the vc…
…lick handler in charge of adding the active state

gseguin added a commit that referenced this issue Aug 18, 2011

@gseguin gseguin closed this Aug 18, 2011

@suewonjp

This comment has been minimized.

Show comment
Hide comment
@suewonjp

suewonjp Jan 29, 2016

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

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

This comment has been minimized.

Show comment
Hide comment
@suewonjp

suewonjp Jan 29, 2016

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"

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

This comment has been minimized.

Show comment
Hide comment
@arschmitz

arschmitz Jan 29, 2016

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

Member

arschmitz commented Jan 29, 2016

@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

This comment has been minimized.

Show comment
Hide comment
@suewonjp

suewonjp Jan 30, 2016

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

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