Checkboxes non-functional in 2.0.19?

[morgant]

Note: For general questions and feature requests please leave a message
on Gitter: https://gitter.im/comfy/comfortable-mexican-sofa

Expected behavior

Click and touch events on checkbox boxes or their labels in the admin interface, esp. publish & category checkboxes in pages, should toggle the checkbox on or off.

Actual behavior

All checkboxes in the admin interface do not toggle on/off when clicked/tapped, but will toggle on/off when navigated & toggled via the keyboard.

Steps to reproduce

1. Log into the admin interface
2. Click on Pages
3. Click Edit on a page
4. Attempt to toggle the "Published" checkbox

I have confirmed that one cannot toggle any checkbox in Chrome, Firefox, or Safari, on macOS, iOS, and OpenBSD.

System configuration

Rails version: 6.0.1

CMS version: 2.0.19

Ruby version: 2.6.5

comfy_archive version: 0.2.0

[morgant]

I'm having trouble tracking this down and would appreciate any confirmation in other environments. This was functional under comfortable_mexican_sofa 2.0.18 w/comfy_archive 0.2.0, but is broken under comfortable_mexican_sofa 20.0.19 (which did bump Bootstrap to v4.3.1 in PR #890.) It's certainly possible this is only in our environment.

[morgant]

I'm noticing that comfy_bootstrap_form was updated from 4.0.6 to 4.0.8 between the diffs of our working environment and non-working environment, so that's a potential culprit.

Also of note: the working checkboxes appear to be standard input items while the non-functional checkboxes appear to be custom checkboxes.

Working checkbox:

<div class="form-check">
  <input name="page[is_published]" type="hidden" value="0">
  <input class="form-check-input" type="checkbox" value="1" checked="checked" name="page[is_published]">
  <label class="form-check-label">Published</label>
</div>

Non-functional checkbox:

<div class="custom-control custom-checkbox">
  <input name="page[is_published]" type="hidden" value="0">
  <input class="custom-control-input" type="checkbox" value="1" checked="checked" name="page[is_published]">
  <label class="custom-control-label">Published</label>
</div>

This seems to be valid structure, according to the BootStrap 4.3 documentation, though maybe missing the for in the label (one would think the checkbox portion would still work if that were the cause).

[GBH]

Thanks for the report. There might be a bug because form builder is using custom-control styling.

For now, try to rollback form gem to a older version.

[morgant]

@GBH Thanks, rolling back to version 4.0.7 of comfy_bootstrap_form seems to resolve the issue in our environment. I'll be doing more testing to see if I can determine why the custom controls don't work.

Interestingly, the checkboxes in the comfy_bootstrap_form demo site seem to work correctly.

[morgant]

It does seem to be caused by the missing for in the label, but I'm not seeing why the comfy_bootstrap_form demo site is generating them, but comfortable_mexican_sofa is not. Removing the for from any label in the demo site renders it non-functional.

[GBH]

Demo is on Rails 6. Maybe there's something slightly different about how checkboxes are generated between Rails versions? I'll try to fix this when I find time.

[stacytalbot]

@morgant We are also having this issue in rails 5.2.0 and comfortable_mexican_sofa 2.0.0

[dam13n]

@morgant Same for us.

[djmaze]

Same problem here with Rails 5.2.6 and comfortable_mexican_sofa 2.0.17. Downgrading the form gem to 4.0.7 as @morgant said made the issue go away.