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

Checkbox and label different select state #5973

Closed
radiallogic opened this Issue May 7, 2013 · 18 comments

Comments

Projects
None yet
8 participants
@radiallogic

radiallogic commented May 7, 2013

Touching the check box toggles the label selection and touching the label doesn't, this means that the label can look selected when it isn't and vice versa.

this is repeatable on the demo here.

http://api.jquerymobile.com/checkboxradio/

@jaspermdegroot

This comment has been minimized.

Show comment
Hide comment
@jaspermdegroot

jaspermdegroot May 7, 2013

Member

I tested this on Android and the checkbox buttons keep the hover state after you clicked on them. Even when using the :hover pseudo class for hover style. Doesn't happen on iOS.

Member

jaspermdegroot commented May 7, 2013

I tested this on Android and the checkbox buttons keep the hover state after you clicked on them. Even when using the :hover pseudo class for hover style. Doesn't happen on iOS.

@radiallogic

This comment has been minimized.

Show comment
Hide comment
@radiallogic

radiallogic May 7, 2013

I think that is a slightly different issue to what I was trying to describe. On all platforms I've tested; android 4.1, 4.2 and 2.33, the latest ios and desktop chrome on centos 6.

clicking the label with check the checkbox but not grey out the label. Clicking the checkbox will grey out the button.

radiallogic commented May 7, 2013

I think that is a slightly different issue to what I was trying to describe. On all platforms I've tested; android 4.1, 4.2 and 2.33, the latest ios and desktop chrome on centos 6.

clicking the label with check the checkbox but not grey out the label. Clicking the checkbox will grey out the button.

@ryanmaxwell

This comment has been minimized.

Show comment
Hide comment
@ryanmaxwell

ryanmaxwell May 8, 2013

This is a PITA. I'm seeing this on iOS - problem did not occur on 1.2.1 - but appeared in 1.3 +

tapping a checkbox/radio label will work, but tapping the actual radio/the checkbox will result in the control staying in a depressed state.
screen shot 2013-05-08 at 14 45 03
screen shot 2013-05-08 at 14 44 46

ryanmaxwell commented May 8, 2013

This is a PITA. I'm seeing this on iOS - problem did not occur on 1.2.1 - but appeared in 1.3 +

tapping a checkbox/radio label will work, but tapping the actual radio/the checkbox will result in the control staying in a depressed state.
screen shot 2013-05-08 at 14 45 03
screen shot 2013-05-08 at 14 44 46

@ryanmaxwell

This comment has been minimized.

Show comment
Hide comment
@ryanmaxwell

ryanmaxwell May 8, 2013

Here's a workaround for my issue - its to do with the 'touchdown' handler on the control. This intercepts that call, and clicks the label instead.

    fixupCheckboxesInContainer = function($container) {
        $container.find('.ui-checkbox').on('touchstart', 'span.ui-icon', function(ev) {
            ev.preventDefault();
            $(this).closest('label').trigger('click');
            return false;
        });
    };

you can call this on pagebeforeshow to apply to all pages (pagecreate is too early) - and also call it after dynamically inserting any checkboxes in a form - by passing in the form as the container.

    $(document).on('pagebeforeshow', '[data-role=page]', function() { 
        var $page = $(this);
        fixupCheckboxesInContainer($page);
    });

ryanmaxwell commented May 8, 2013

Here's a workaround for my issue - its to do with the 'touchdown' handler on the control. This intercepts that call, and clicks the label instead.

    fixupCheckboxesInContainer = function($container) {
        $container.find('.ui-checkbox').on('touchstart', 'span.ui-icon', function(ev) {
            ev.preventDefault();
            $(this).closest('label').trigger('click');
            return false;
        });
    };

you can call this on pagebeforeshow to apply to all pages (pagecreate is too early) - and also call it after dynamically inserting any checkboxes in a form - by passing in the form as the container.

    $(document).on('pagebeforeshow', '[data-role=page]', function() { 
        var $page = $(this);
        fixupCheckboxesInContainer($page);
    });
@godswearhats

This comment has been minimized.

Show comment
Hide comment
@godswearhats

godswearhats Aug 2, 2013

I've tried to reproduce this in 1.4, without success.

Can someone else please double check for me?

(Testing on iPhone 5, iOS 6.1.4)

godswearhats commented Aug 2, 2013

I've tried to reproduce this in 1.4, without success.

Can someone else please double check for me?

(Testing on iPhone 5, iOS 6.1.4)

@jaspermdegroot

This comment has been minimized.

Show comment
Hide comment
@jaspermdegroot

jaspermdegroot Aug 4, 2013

Member

Thanks for testing @godswearhats !

I can't reproduce this anymore with latest code either. Tested on iPad Retina iOS 6.1.3 and Galaxy Nexus Android 4.2.1.

Closing as fixed.

Member

jaspermdegroot commented Aug 4, 2013

Thanks for testing @godswearhats !

I can't reproduce this anymore with latest code either. Tested on iPad Retina iOS 6.1.3 and Galaxy Nexus Android 4.2.1.

Closing as fixed.

@applejacko

This comment has been minimized.

Show comment
Hide comment
@applejacko

applejacko Aug 13, 2013

Ryan,

I like your solution idea except I notice one thing that doesn't work, if this is in a mobile browser on say, an iPhone, either inside a PhoneGap app or as a pure web app pointing at web server. Try this:

  1. Toggle the checkbox a few times using the checkbox itself. (works fine)
  2. Then toggle the checkbox a few times using the label. (works fine)
  3. Toggle the checkbox using the checkbox itself again. You'll notice it takes 3 clicks to change its appearance (though if you pop an alert to view the .checked property, you'll see its value IS toggling, so it's really just the checkbox appearance that fails to update on this step.

Any ideas?

Jack

applejacko commented Aug 13, 2013

Ryan,

I like your solution idea except I notice one thing that doesn't work, if this is in a mobile browser on say, an iPhone, either inside a PhoneGap app or as a pure web app pointing at web server. Try this:

  1. Toggle the checkbox a few times using the checkbox itself. (works fine)
  2. Then toggle the checkbox a few times using the label. (works fine)
  3. Toggle the checkbox using the checkbox itself again. You'll notice it takes 3 clicks to change its appearance (though if you pop an alert to view the .checked property, you'll see its value IS toggling, so it's really just the checkbox appearance that fails to update on this step.

Any ideas?

Jack

@ryanmaxwell

This comment has been minimized.

Show comment
Hide comment
@ryanmaxwell

ryanmaxwell Aug 14, 2013

@applejacko my suggestion would be to upgrade to JQM 1.4 which has apparently resolved this issue, rather than trying to monkey-patch it like me ;)

ryanmaxwell commented Aug 14, 2013

@applejacko my suggestion would be to upgrade to JQM 1.4 which has apparently resolved this issue, rather than trying to monkey-patch it like me ;)

@applejacko

This comment has been minimized.

Show comment
Hide comment
@applejacko

applejacko Aug 22, 2013

@ryanmaxwell

Ha! Yeah, nice job though! I ended up just adding one thing to your solution: doing .checkboxradio("refresh");'s on my checkboxes. That + your stuff fixed it, but...only for some phones. Others I see can still can stuck gray.

I'm about to release my app, so I don't want to switch to 1.4 - which is still in Alpha too.

I'm thinking, the way to fix this MAYBE is to just override the "hover" and "down" CSS styles to match the "up" style perhaps. I'm not a CSS guy, but I suppose I'm gonna have to be for this one little annoying bug. I don't know what else to try.

Update: After typing the above, I tried the 1.4 Alpha. It seems to have made things worse, because clicking on the label no longer changes it to white. So it REALLY gets stuck on gray.

applejacko commented Aug 22, 2013

@ryanmaxwell

Ha! Yeah, nice job though! I ended up just adding one thing to your solution: doing .checkboxradio("refresh");'s on my checkboxes. That + your stuff fixed it, but...only for some phones. Others I see can still can stuck gray.

I'm about to release my app, so I don't want to switch to 1.4 - which is still in Alpha too.

I'm thinking, the way to fix this MAYBE is to just override the "hover" and "down" CSS styles to match the "up" style perhaps. I'm not a CSS guy, but I suppose I'm gonna have to be for this one little annoying bug. I don't know what else to try.

Update: After typing the above, I tried the 1.4 Alpha. It seems to have made things worse, because clicking on the label no longer changes it to white. So it REALLY gets stuck on gray.

@applejacko

This comment has been minimized.

Show comment
Hide comment
@applejacko

applejacko Aug 22, 2013

@ryanmaxwell

I ended up doing a CSS override, making the hover style match the up style (made the definition of .ui-btn-hover-c be the same as that for .ui-btn-up-c). And style "c" is used as the default in jQM in checkboxes, so there was no need to dress up tags around my checkboxes with data-theme="c" anywhere. Works well.

(OK, I get no hovering indication on a Galaxy Note II which has stylus hovering sensing, but I can live without it. So basically, looks like the hover style was getting stuck from time to time.

My guess - and I could be completely wrong here - is that the checkbox widgetry worked and works great on a desktop browser, but there's something someone didn't quite catch or think about when porting it to mobile. Some combination of mobile events - that never happens on Desktopland - is keeping the hover stuck on in mobile browsers in some instances. I've even seen multiple shades of gray when I had a room full of testers! So I guess the style was being applied...twice or more. (???) I think I have a screenshot somewhere, if the tester that made that happen emailed it to me...

Jack

applejacko commented Aug 22, 2013

@ryanmaxwell

I ended up doing a CSS override, making the hover style match the up style (made the definition of .ui-btn-hover-c be the same as that for .ui-btn-up-c). And style "c" is used as the default in jQM in checkboxes, so there was no need to dress up tags around my checkboxes with data-theme="c" anywhere. Works well.

(OK, I get no hovering indication on a Galaxy Note II which has stylus hovering sensing, but I can live without it. So basically, looks like the hover style was getting stuck from time to time.

My guess - and I could be completely wrong here - is that the checkbox widgetry worked and works great on a desktop browser, but there's something someone didn't quite catch or think about when porting it to mobile. Some combination of mobile events - that never happens on Desktopland - is keeping the hover stuck on in mobile browsers in some instances. I've even seen multiple shades of gray when I had a room full of testers! So I guess the style was being applied...twice or more. (???) I think I have a screenshot somewhere, if the tester that made that happen emailed it to me...

Jack

@applejacko

This comment has been minimized.

Show comment
Hide comment
@applejacko

applejacko Aug 27, 2013

@uGoMobi, could you please look at this again and reopen the bug ticket? If you point a MOBILE BROWSER at this jQM 1.4 example: http://jsbin.com/ofuhaw/286, you'll see four distinct checkbox states if you toggle them enough times:

  • gray/checked
  • gray/unchecked
  • white/checked
  • gray/unchecked

You'll see the issue in mere seconds.

You'll see the bug with an iPhone, Galaxy Note II, Galaxy S4, Motorola RAZR Maxx, among others. The only phone I know of at this point that does not show it is the Google Nexus 4; with this phone, the backgrounds never turn gray. So it fails with most phones.

Thanks,

Jack

P.S. I'm using these tags in the above example, jQM 1.4.0-alpha2:

< link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0-alpha.2/jquery.mobile-1.4.0-alpha.2.min.css" >
< script src="http://code.jquery.com/jquery-1.10.2.min.js" >< /script >
< script src="http://code.jquery.com/mobile/1.4.0-alpha.2/jquery.mobile-1.4.0-alpha.2.min.js" >< /script >

applejacko commented Aug 27, 2013

@uGoMobi, could you please look at this again and reopen the bug ticket? If you point a MOBILE BROWSER at this jQM 1.4 example: http://jsbin.com/ofuhaw/286, you'll see four distinct checkbox states if you toggle them enough times:

  • gray/checked
  • gray/unchecked
  • white/checked
  • gray/unchecked

You'll see the issue in mere seconds.

You'll see the bug with an iPhone, Galaxy Note II, Galaxy S4, Motorola RAZR Maxx, among others. The only phone I know of at this point that does not show it is the Google Nexus 4; with this phone, the backgrounds never turn gray. So it fails with most phones.

Thanks,

Jack

P.S. I'm using these tags in the above example, jQM 1.4.0-alpha2:

< link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0-alpha.2/jquery.mobile-1.4.0-alpha.2.min.css" >
< script src="http://code.jquery.com/jquery-1.10.2.min.js" >< /script >
< script src="http://code.jquery.com/mobile/1.4.0-alpha.2/jquery.mobile-1.4.0-alpha.2.min.js" >< /script >

@jaspermdegroot

This comment has been minimized.

Show comment
Hide comment
@jaspermdegroot

jaspermdegroot Sep 18, 2013

Member

We will test this again. Re-opening and removed label "fixed" for now. See also #6396.

Member

jaspermdegroot commented Sep 18, 2013

We will test this again. Re-opening and removed label "fixed" for now. See also #6396.

@ghost ghost assigned scottjehl Sep 23, 2013

@jaspermdegroot

This comment has been minimized.

Show comment
Hide comment
@jaspermdegroot

jaspermdegroot Oct 11, 2013

Member

I have been testing this page http://jsbin.com/AKOmUxa/26 on:

  • Android 4.2.1 / Galaxy Nexus / Android browser and Chrome
  • iOS 7.0.2 / iPhone 5 / Mobile Safari and Chrome.

In general you'll see that when you tap on a checkbox label element (with JQM this is the button) that it gets the :active (down) state and when you lift your finger it gets the :hover state and stays in this state.

I noticed two issues:

  • On Android/Chrome the JQM checkbox buttons stay in the :active state. This doesn't happen with the native test at the bottom of the page.
  • On iOS, Safari and Chrome, the right label gets the :active state but often it's the previous label that gets the :hover state after that. Not only inside the controlgroup; when clicking on the native example at the bottom a button inside the controlgroup gets the hover style. This seems to be an iOS WebKit bug.
Member

jaspermdegroot commented Oct 11, 2013

I have been testing this page http://jsbin.com/AKOmUxa/26 on:

  • Android 4.2.1 / Galaxy Nexus / Android browser and Chrome
  • iOS 7.0.2 / iPhone 5 / Mobile Safari and Chrome.

In general you'll see that when you tap on a checkbox label element (with JQM this is the button) that it gets the :active (down) state and when you lift your finger it gets the :hover state and stays in this state.

I noticed two issues:

  • On Android/Chrome the JQM checkbox buttons stay in the :active state. This doesn't happen with the native test at the bottom of the page.
  • On iOS, Safari and Chrome, the right label gets the :active state but often it's the previous label that gets the :hover state after that. Not only inside the controlgroup; when clicking on the native example at the bottom a button inside the controlgroup gets the hover style. This seems to be an iOS WebKit bug.

@gabrielschulhof gabrielschulhof modified the milestones: 1.4.3, 1.4.1 Mar 1, 2014

@gabrielschulhof

This comment has been minimized.

Show comment
Hide comment
@gabrielschulhof

gabrielschulhof Mar 3, 2014

Contributor

@uGoMobi maybe this is another instance of it-behaves-like-there's-a-mouse-even-when-there's-no-mouse à la #6248 and #6869?

Contributor

gabrielschulhof commented Mar 3, 2014

@uGoMobi maybe this is another instance of it-behaves-like-there's-a-mouse-even-when-there's-no-mouse à la #6248 and #6869?

@gabrielschulhof

This comment has been minimized.

Show comment
Hide comment
@gabrielschulhof

gabrielschulhof Sep 6, 2014

Contributor

@jaspermdegroot is this not a browser bug? We cannot really help if the browser does not remove the hover state.

Contributor

gabrielschulhof commented Sep 6, 2014

@jaspermdegroot is this not a browser bug? We cannot really help if the browser does not remove the hover state.

@jaspermdegroot

This comment has been minimized.

Show comment
Hide comment
@jaspermdegroot

jaspermdegroot Sep 8, 2014

Member

@gabrielschulhof

Yeah, but we still have to see if we can do something about it because it is a problem that comes with the way we enhance the checkbox (using the label element as button). Let's see how it looks with the new checkboxradio widget.

Member

jaspermdegroot commented Sep 8, 2014

@gabrielschulhof

Yeah, but we still have to see if we can do something about it because it is a problem that comes with the way we enhance the checkbox (using the label element as button). Let's see how it looks with the new checkboxradio widget.

@jaspermdegroot jaspermdegroot modified the milestones: 1.5.0, 1.4.4 Sep 8, 2014

@arschmitz

This comment has been minimized.

Show comment
Hide comment
@arschmitz

arschmitz Oct 23, 2014

Member

Im going to close this the widget is being replaced by ui version if this is still a problem in ui version the issue will need to be opened on ui.

Member

arschmitz commented Oct 23, 2014

Im going to close this the widget is being replaced by ui version if this is still a problem in ui version the issue will need to be opened on ui.

@ghost

This comment has been minimized.

Show comment
Hide comment
@ghost

ghost Oct 19, 2015

Just another workaround that fixed this bug for my case:

    // #### Fix checkbox hover state on mobile (hack)
    // When clicking checkbox, restore correct state

    $(document).on("pagebeforeshow", "[data-role=page]", function () {
        $(this).find(".ui-checkbox label").on("vclick", function () {
            $(this).removeClass("ui-btn-hover-c");
        });
    });

ghost commented Oct 19, 2015

Just another workaround that fixed this bug for my case:

    // #### Fix checkbox hover state on mobile (hack)
    // When clicking checkbox, restore correct state

    $(document).on("pagebeforeshow", "[data-role=page]", function () {
        $(this).find(".ui-checkbox label").on("vclick", function () {
            $(this).removeClass("ui-btn-hover-c");
        });
    });
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment