J3 Issue ?
avatar tonypartridge
tonypartridge
3 Sep 2018

Steps to reproduce the issue

PR #20221 breaks using btn-group in a checkbox group i.e. using code:

<div class="checkbox btn-group "> <label for="cb_wd0" class="checkbox btn active btn-danger"><input type="checkbox" id="cb_wd0" name="weekdays[]" value="0" checked="checked" class="checkbox " style="display: none;"><span class="sunday">S</span></label> <label for="cb_wd1" class="checkbox btn active btn-success"><input type="checkbox" id="cb_wd1" name="weekdays[]" value="1" class="checkbox " style="display: none;">M</label> <label for="cb_wd2" class="checkbox btn active btn-success"><input type="checkbox" id="cb_wd2" name="weekdays[]" value="2" class="checkbox " style="display: none;">T</label> <label for="cb_wd3" class="checkbox btn active btn-success"><input type="checkbox" id="cb_wd3" name="weekdays[]" value="3" class="checkbox " style="display: none;">W</label> <label for="cb_wd4" class="checkbox btn active btn-success"><input type="checkbox" id="cb_wd4" name="weekdays[]" value="4" class="checkbox " style="display: none;">T</label> <label for="cb_wd5" class="checkbox btn active btn-success"><input type="checkbox" id="cb_wd5" name="weekdays[]" value="5" class="checkbox " style="display: none;">F</label> <label for="cb_wd6" class="checkbox btn active btn-success"><input type="checkbox" id="cb_wd6" name="weekdays[]" value="6" class="checkbox " style="display: none;"><span class="saturday">S</span></label> </div>

Expected result

To allow individual selection.

Actual result

Resets selection to the last one selected.

System information (as much as possible)

Additional comments

This previously provided a neat way to show all select options in a row. Now this no longer works in an incremental release. I could understand for a 3.X release

avatar tonypartridge tonypartridge - open - 3 Sep 2018
avatar joomla-cms-bot joomla-cms-bot - change - 3 Sep 2018
Labels Added: ?
avatar joomla-cms-bot joomla-cms-bot - labeled - 3 Sep 2018
avatar franz-wohlkoenig franz-wohlkoenig - change - 3 Sep 2018
Status New Discussion
avatar franz-wohlkoenig franz-wohlkoenig - change - 3 Sep 2018
Category Administration
avatar Quy
Quy - comment - 3 Sep 2018
avatar zero-24 zero-24 - change - 3 Sep 2018
Title
btn-group with checkboxes no longer works correctly.
[3.8/3.9] btn-group with checkboxes no longer works correctly.
avatar zero-24 zero-24 - edited - 3 Sep 2018
avatar brianteeman brianteeman - change - 3 Sep 2018
Labels Added: J3 Issue
avatar brianteeman brianteeman - labeled - 3 Sep 2018
avatar okonomiyaki3000
okonomiyaki3000 - comment - 4 Sep 2018

@tonypartridge Could you provide some before and after screenshots and maybe a more complete description of what's expected and what's actually happening? To me, it seems exactly the same with the old code and the new.

avatar okonomiyaki3000
okonomiyaki3000 - comment - 4 Sep 2018

By the way, am I having dejavu or did you bring up this same issue some months ago we also determined then that #20221 is not the problem?

avatar tonypartridge
tonypartridge - comment - 4 Sep 2018

Hello,

Yep I originally brought it up with the frontend JS. But dropped it as it wasn't a huge concern as not many people use the default protostar template.

Pre 3.8.12;
joomla_toggle_issue_pre_3_8_12

and in 3.8.12;
joomla_toggle_issue_3_8_12

On change here is the Joomla! version, reverting template.js restores correct behaviour.

avatar okonomiyaki3000
okonomiyaki3000 - comment - 4 Sep 2018

When I paste in your code, all I get is this:

daysoftheweek

It doesn't really work in any version of Joomla.

avatar okonomiyaki3000
okonomiyaki3000 - comment - 7 Sep 2018

Is there some particular context where this works? Is there something I need to do to set it up properly?

avatar joeforjoomla
joeforjoomla - comment - 7 Sep 2018

The code for the radio label has been changed in the template.js file of Isis. I guess that this change could be related to this issue. I suggest to try to restore the template.js code in 3.8,11, i experimented another issue in my extensions due to this change. In particular now the click event is bound through jQuery document.body

avatar tonypartridge
tonypartridge - comment - 7 Sep 2018

Hello,

As explained before it is the template is causing it. The scenario above is replicatable for me as per the images

On Sep 7, 2018 at 8:45 am, <JoeforJoomla Boy (mailto:notifications@github.com)> wrote:

The code for the radio label has been changed in the template.js file of Isis. I guess that this change could be related to this issue. I suggest to try to restore the template.js code in 3.8,11, i experimented another issue in my extensions due to this change. In particular now the click event is bound through jQuery document.body


You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub (#21971 (comment)), or mute the thread (https://github.com/notifications/unsubscribe-auth/ABVglnLmmGKBUmSFE_fUAdeIrVoW4hSfks5uYiQUgaJpZM4WXC4-).

avatar okonomiyaki3000
okonomiyaki3000 - comment - 7 Sep 2018

@tonypartridge Sorry but that code you posted doesn't turn out anything like those images when I run it. Does it need to be in a particular component? Is there any non-standard js or css on the page? Can you tell any more about the context where this is running?

avatar yvesh
yvesh - comment - 12 Sep 2018

Can confirm the issue of @tonypartridge - all our extensions broke because of that ;-)

Checkboxes and Radio buttons are no longer working

avatar ggppdk
ggppdk - comment - 12 Sep 2018

For the checkboxes field can you give the XML field definitions that you are using ?

avatar okonomiyaki3000
okonomiyaki3000 - comment - 12 Sep 2018

@tonypartridge @yvesh Come on, guys. You gotta give me something to work with. All your extensions broke? Which extensions? What are they doing that broke?

avatar tonypartridge
tonypartridge - comment - 13 Sep 2018

You can try JEvents at present under the repeat options. And then try pre .12 and with .12 you’ll see they are not multi selectable with this change.

On Sep 13, 2018 at 12:51 am, <Elijah Madden (mailto:notifications@github.com)> wrote:

@tonypartridge (https://github.com/tonypartridge) @yvesh (https://github.com/yvesh) Come on, guys. You gotta give me something to work with. All your extensions broke? Which extensions? What are they doing that broke?


You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub (#21971 (comment)), or mute the thread (https://github.com/notifications/unsubscribe-auth/ABVglnBe9xFX3BMCgDNkryxtzQerKBziks5uaZ4LgaJpZM4WXC4-).

avatar okonomiyaki3000
okonomiyaki3000 - comment - 14 Sep 2018

@tonypartridge OK, now we're getting somewhere. Here's what I've found so far.

The previous code that looks like this:

$('.btn-group label:not(.active)').click(function () { ... });

Has no influence on your buttons. This is a bit weird since they are included in $('.btn-group label:not(.active)') and so must get the click event handler assigned to them.

The new code which works on the same selector but does it through delegation by the body tag, does affect your buttons.

I'm still looking but I expect that the reason is that you have some code which is first removing the click event handler from the buttons and then maybe adding a custom one or something. Is this the case?

I think I can solve your issue with a change to the template code which avoids reverting back to the old non-delegated code but there's also a solution on your end which is more elegant than removing event handlers that the template has placed. You can simply catch the event and stop it from propagating up to the body tag like this:

$('#byday').on('click', function (e) { e.stopPropagation(); });
avatar okonomiyaki3000
okonomiyaki3000 - comment - 14 Sep 2018

Thinking about this template code now, it's clear that it was only ever meant for radio button groups. The way it's been written makes no sense for checkboxes at all. I will rewrite it to reflect that.

avatar okonomiyaki3000
okonomiyaki3000 - comment - 14 Sep 2018

I have a fix. It's a rather significant change but it all makes sense, I assure you.

First of all, the old code was like this:

$('.btn-group label:not(.active)').click(function () { ... });

And the recent changes still used the same selector, but delegated event handling to the body tag. But look at that selector. It makes no sense. It says we're concerned with any label inside a .btn-group as long as it's not .active. So then it means we can switch things to .active but, if they are already .active, we shouldn't do anything with them. That's fine for radio buttons but not checkboxes. So already this code is not for checkboxes.

Next, it handles the click event on the label. I think it would be better to handle the change event on the input so I changed that.

The body of that function had more radiobutton-specific code. The clicked item would get a specific class, all others would have classes removed. That's not checkbox behavior.

So I've made several changes. First, it only targets radio buttons now. So it should be impossible to affect things like the day picker in JEvents. Second, it handles the change event on the control, not the click event on the label. In handling that event, it updates any and all related labels. It still uses delegation on the body tag instead of the old way of attaching events to each and every label. This way is better for several reasons which you probably already know.

Although I'm specifically targeting radio buttons now, the changes I've made make this code suitable for checkbox button groups as well. If we would ever want to use such things, the code only needs to be modified slightly.

avatar franz-wohlkoenig franz-wohlkoenig - change - 14 Sep 2018
Status Discussion Closed
Closed_Date 0000-00-00 00:00:00 2018-09-14 07:34:34
Closed_By franz-wohlkoenig
avatar joomla-cms-bot
joomla-cms-bot - comment - 14 Sep 2018
avatar joomla-cms-bot joomla-cms-bot - close - 14 Sep 2018
avatar franz-wohlkoenig
franz-wohlkoenig - comment - 14 Sep 2018

closed as having Pull Request #22177.

Add a Comment

Login with GitHub to post a comment