$().button('toggle') not working in 4.4.1

[dkwebtec]

$().button('toggle')

not working in 4.4.1, but working fine in 4.3.1

        <div class="btn-group-toggle" data-toggle="buttons">
            <label id="my-switch" class="btn btn-lg btn-light font-weight-bold ml-2 text-nowrap">
            <input type="checkbox" autocomplete="off" value="1"><span class="check">✓</span> <i class="far fa-clipboard"></i> <span class="d-none d-lg-inline">My</span>
            </label>
        </div>

$("#my-switch").button('toggle');

4.4.1 https://codepen.io/DK568/pen/MWYxWMO

4.3.1 https://codepen.io/DK568/pen/ExaMaxd

the difference is that button is not checked by jquery

[MartijnCuppens]

Bug reports must include a live demo of the problem. Per our contributing guidelines, please create a reduced test case via CodePen/JS Bin or Stackblitz and report back with your link, Bootstrap version, and specific browser and OS details.

This is an automated reply

[dkwebtec]

in my project when I revert from 4.4.1 to 4.3.1 without modifying anything else it starts working

[MartijnCuppens]

Both demos seem to work fine?

[dkwebtec]

What I see is that in 4.4.1 demo the toggle button is not active (checked)

the method is not working

[patrickhlauke]

forcing the checkbox input to be visible, i see that the checkbox does get correctly checked (just looking in the DOM tree in devtools or whatever doesn't actually show you the state of a checkbox)

(ah sorry, you mean checked as result of the method invocation in JS, i see what you mean now)

[patrickhlauke]

confirming that button('toggle') seems broken for checkboxes (but not for radio buttons, oddly). tested by hacking away quickly at https://getbootstrap.com/docs/4.4/components/buttons/#button-plugin (giving the examples id attributes and trying to toggle them)

[XhmikosR]

Does master work?

/CC @Johann-S

[XhmikosR]

Ping @Johann-S ^^

[Lausselloic]

Hi, I think the test need to be done on properties of the component and not on his attribute.
I've done the test on the same page as you @patrickhlauke and here's the result :

$('#check-test').is(':checked')
true
$('#check-test').prop('checked')
true
$('#check-test').attr('checked')
"checked"
$('#check-test').attr('checked')
"checked"
$('#check-test').prop('checked')
false
$('#check-test').is(':checked')
false

[Johann-S]

@XhmikosR it should be the same in master

The things I can see, it's in v4.3.1 we trigger a change event and not in v4.4.1, maybe @patrickhlauke can help us to know where is the good behavior here

[patrickhlauke]

i have lost track of how any of our JS work, so i'd go by actual behavior. make the actual checkbox/radio button visible in the CSS, run the button('toggle') and see if it has an actual effect...

[Johann-S]

actually it does nothing 😟 for me it's related to this commit: 24abed1

but I don't know the correct behavior

[patrickhlauke]

so i introduced the problem? gah, i absolutely detest the very existence of all that code. such a hacky construct we've been carrying around. admittedly, i haven't been able to trace the full logic of that code at the time either, it was a lot of very hacky trial and error to work around browser behaviors and bugs. can't wait for the CSS-only approach in v5...

i think fundamentally the problem we're having is that browsers do most of the work by default when the <label> is clicked or when the checkbox/radio are toggled with the keyboard. my hacky code tried to prevent problems when activating with the keyboard, which was previously preventDefaulted when it shouldn't have been. but having fixed THAT aspect, the programmatic toggling is now borked. i'll admit that right at this point, I'm not sure how to tackle this...