$().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...

[Lausselloic]

Hi, I wanted to help on that but can't clearly identify what is a bug, I've the same result on 4.3 and 4.4

There's no need to trigger the toggle on the label itself like in the pen, the button auto-init with the data-toggle
I've tried on latest chrome and Firefox on windows with the following html

<label class="btn btn-secondary">
    <input type="checkbox" autocomplete="off" value="1" id="myc">
    <span class="check">✓</span> <i class="far fa-clipboard"></i> <span class="d-none d-lg-inline">My</span>
  </label>

And running $('#myc')[0].checked into the console return the right value (true or false) when changing the state with keyboard or mouse

So I can't understand what's the error, if someone could explain to me

[patrickhlauke]

the problem is: if you try to toggle programmatically with the method, it doesn't work (it's not about auto-initialising or anything...it's that at any point when you try and trigger the method, it does nothing, but it should work exactly the same way as clicking/activating with keyboard)

[XhmikosR]

Fixed in #30388

[dkwebtec]

I have tried this issue under version 4.5.0 and the method seems working but the change event is fired 3 times on each button click

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

try to click the button