Problem/Motivation

States on radios and checkboxes elements are currently broken until #994360: #states cannot check/uncheck checkboxes elements is resolved, but when that issue is fixed another appears.

When the states API manipulates the 'disabled' or 'checked' state of form elements, it looks for the closest 'form-item' or 'form-wrapper' element of the state target and changes the attribute on all of its children.
'checkboxes' and 'radios' elements do not have the 'form-wrapper' class, which causes the wrapper element higher in the hierarchy to be found and have all of its children affected instead of just the desired element.

e.g. with the following form, when the radios element is changed from 'one' to 'two', the checkboxes should be hidden. Instead, the entire fieldset is hidden.

$form['group'] = [
  '#type' => 'fieldset',
  '#tree' => TRUE,
];
$form['group']['radios'] = [
  '#type' => 'radios',
  '#title' => 'Radios',
  '#options' => [
    'one' => 'One',
    'two' => 'Two',
  ],
  '#default_value' => 'one',
];
$form['group']['checkboxes'] = [
  '#type' => 'checkboxes',
  '#title' => 'Checkboxes',
  '#options' => [
    'alpha' => 'Alpha',
    'beta' => 'Beta',
  ],
  '#states' => [
    'visible' => [
      [':input[name="group[radios]"]' => ['value' => 'one']],
  ],
];

Proposed resolution

The issues #2041845: Remove theme_checkboxes() and call theme('container') instead and #2041825: Remove theme_radios() and call theme('container') instead intended to remove the 'checkboxes' and 'radios' templates in favour of a generic 'container' template, which would have the 'form-wrapper' class. These templates can no longer be removed for BC reasons, but they should be made to match the classes of the container template.

CommentFileSizeAuthor
#27 Screencast from 11-12-2023 05 43 56 ΜΜ.mp41.6 MBdimitriskr
#26 Screencast from 11-12-2023 05 43 56 ΜΜ.mp41.6 MBdimitriskr
#11 drupal-2945727-11-radios-checkboxes-form-wrapper.patch3.4 KBgapple
#4 drupal-2945727-4-radios-checkboxes-form-wrapper.patch3.57 KBgapple
#2 drupal-2945727-2-radios-checkboxes-form-wrapper.patch3.56 KBgapple
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

gapple created an issue. See original summary.

gapple’s picture

gapple
he/they
Primary language English
CreditAttribution: gapple as a volunteer commented
Status: Active » Needs review
FileSize
drupal-2945727-2-radios-checkboxes-form-wrapper.patch3.56 KB

This patch adds js-form-wrapper, form-wrapper, and the relevant element class to all radios/checkboxes templates in core.

This also highlights an inconsistency in the current templates: all of the current checkboxes templates add the form-checkboxes class (system module, classy theme, stable theme), but only the classy theme's radios template adds the form-radios class.

Status: Needs review » Needs work

The last submitted patch, 2: drupal-2945727-2-radios-checkboxes-form-wrapper.patch, failed testing. View results

gapple’s picture

gapple
he/they
Primary language English
CreditAttribution: gapple as a volunteer commented
FileSize
drupal-2945727-4-radios-checkboxes-form-wrapper.patch3.57 KB

Fixed syntax error in patch

gapple’s picture

gapple
he/they
Primary language English
CreditAttribution: gapple as a volunteer commented
Status: Needs work » Needs review
borisson_’s picture

borisson_
Primary language Dutch
Location Mechelen, 🇧🇪
CreditAttribution: borisson_ as a volunteer commented

I'm not sure if we're allowed to do this to the stable theme.

andypost’s picture

andypost
he/him
Primary language Russian
CreditAttribution: andypost as a volunteer and at Skilld commented
Status: Needs review » Needs work

Sure, it is no-go for stable

Version: 8.6.x-dev » 8.7.x-dev

Drupal 8.6.0-alpha1 will be released the week of July 16, 2018, which means new developments and disruptive changes should now be targeted against the 8.7.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

joelpittet’s picture

joelpittet
Primary language English
Location Vancouver
CreditAttribution: joelpittet at The University of British Columbia commented
Issue tags: +Needs tests

Bugs can be fixed in stable, I think there could be a case made for this, but a light touch should be made.

  1. Only the classes needed for the functionality, it should be the js-form-wrapper class if I'm not correct and maybe but hopefully not the form-wrapper class(haven't looked at the states.js code yet)
  2. The indentation in the templates should be double checked
  3. A test needs to be added to show the regression and help it doesn't happen again without further thought
gapple’s picture

gapple
he/they
Primary language English
CreditAttribution: gapple as a volunteer commented
Title: Form radios/checkboxes elements should have form-wrapper class » Form radios/checkboxes elements should have js-form-wrapper class

The states patch only uses js-form-wrapper, so form-wrapper should be safe to remove from the patch.

Core and stable applying form-checkboxes but not form-radios could be broken out to a separate issue, since it's not related to this bug but is still a consistency issue.

gapple’s picture

gapple
he/they
Primary language English
CreditAttribution: gapple as a volunteer commented
FileSize
drupal-2945727-11-radios-checkboxes-form-wrapper.patch3.4 KB

I've opened #2988461: Radios template does not apply form-radios class to address the consistency issue with the form-radios class.

The attached patch applies the minimal change of only adding the js-form-wrapper class to checkboxes and radios elements.

gapple’s picture

gapple
he/they
Primary language English
CreditAttribution: gapple as a volunteer commented

I need to double check the behaviour here. The Checkboxes and Radios render element classes use CompositeFormElementTrait, which adds the fieldset theme wrapper but only if the element has a #title or #description attribute. fieldset.html.twig then adds both the js-form-item and js-form-wrapper classes.

It may be better to add the js-form-wrapper class via CompositeFormElementTrait::preRenderCompositeFormElement() only when the fieldset wrapper is not applied, otherwise states may hide the checkbox elements but not the corresponding title and description in the fieldset.

dww’s picture

dww
we/he/they
CreditAttribution: dww as a volunteer commented
Title: Form radios/checkboxes elements should have js-form-wrapper class » [PP-1] Form radios/checkboxes elements should have js-form-wrapper class
Status: Needs work » Postponed
Parent issue: » #3031198: [META] Add classy_dev and minor-branch theme snapshots to allow fixing markup bugs within minor releases without front-end disruption

This is yet another good example of how our policy generates deadlock and prevents fixing bugs.

Marking this blocked on #3031198: [META] Add classy_dev and minor-branch theme snapshots to allow fixing markup bugs within minor releases without front-end disruption

dww’s picture

dww
we/he/they
CreditAttribution: dww as a volunteer commented
Parent issue: #3031198: [META] Add classy_dev and minor-branch theme snapshots to allow fixing markup bugs within minor releases without front-end disruption » #2352949: Deprecate using Classy as the default theme for the 'testing' profile

Sorry for the noise, but #3031198: [META] Add classy_dev and minor-branch theme snapshots to allow fixing markup bugs within minor releases without front-end disruption has evolved, and now I see we have #2352949: Deprecate using Classy as the default theme for the 'testing' profile as the immediate solution to our bugfix deadlock.

Version: 8.7.x-dev » 8.8.x-dev

Drupal 8.7.0-alpha1 will be released the week of March 11, 2019, which means new developments and disruptive changes should now be targeted against the 8.8.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

lauriii’s picture

lauriii
he/him
Primary language Finnish
Location Finland
CreditAttribution: lauriii at Acquia commented
Status: Postponed » Needs work
Issue tags: +Needs frontend framework manager review, +Needs change record

Since this is only adding a js- prefixed class, I think we could proceed with the plan. js- prefixed classes are less likely to collide with pre-existing class names, and they also don't attach any styles. Since this bug fix might require template change from theme authors that have overridden this template, we should provide a change record explaining the necessary steps for them to take. I also tagged this issue for another review later.

lauriii’s picture

lauriii
he/him
Primary language Finnish
Location Finland
CreditAttribution: lauriii at Acquia commented
Title: [PP-1] Form radios/checkboxes elements should have js-form-wrapper class » Form radios/checkboxes elements should have js-form-wrapper class

Version: 8.8.x-dev » 8.9.x-dev

Drupal 8.8.0-alpha1 will be released the week of October 14th, 2019, which means new developments and disruptive changes should now be targeted against the 8.9.x-dev branch. (Any changes to 8.9.x will also be committed to 9.0.x in preparation for Drupal 9’s release, but some changes like significant feature additions will be deferred to 9.1.x.). For more information see the Drupal 8 and 9 minor version schedule and the Allowed changes during the Drupal 8 and 9 release cycles.

Version: 8.9.x-dev » 9.1.x-dev

Drupal 8.9.0-beta1 was released on March 20, 2020. 8.9.x is the final, long-term support (LTS) minor release of Drupal 8, which means new developments and disruptive changes should now be targeted against the 9.1.x-dev branch. For more information see the Drupal 8 and 9 minor version schedule and the Allowed changes during the Drupal 8 and 9 release cycles.

Version: 9.1.x-dev » 9.2.x-dev

Drupal 9.1.0-alpha1 will be released the week of October 19, 2020, which means new developments and disruptive changes should now be targeted for the 9.2.x-dev branch. For more information see the Drupal 9 minor version schedule and the Allowed changes during the Drupal 9 release cycle.

Version: 9.2.x-dev » 9.3.x-dev

Drupal 9.2.0-alpha1 will be released the week of May 3, 2021, which means new developments and disruptive changes should now be targeted for the 9.3.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 9.3.x-dev » 9.4.x-dev

Drupal 9.3.0-rc1 was released on November 26, 2021, which means new developments and disruptive changes should now be targeted for the 9.4.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 9.4.x-dev » 9.5.x-dev

Drupal 9.4.0-alpha1 was released on May 6, 2022, which means new developments and disruptive changes should now be targeted for the 9.5.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 9.5.x-dev » 10.1.x-dev

Drupal 9.5.0-beta2 and Drupal 10.0.0-beta2 were released on September 29, 2022, which means new developments and disruptive changes should now be targeted for the 10.1.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 10.1.x-dev » 11.x-dev

Drupal core is moving towards using a “main” branch. As an interim step, a new 11.x branch has been opened, as Drupal.org infrastructure cannot currently fully support a branch named main. New developments and disruptive changes should now be targeted for the 11.x branch, which currently accepts only minor-version allowed changes. For more information, see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

dimitriskr’s picture

dimitriskr CreditAttribution: dimitriskr commented
FileSize
Screencast from 11-12-2023 05 43 56 ΜΜ.mp41.6 MB

--deleted--

dimitriskr’s picture

dimitriskr CreditAttribution: dimitriskr commented
Status: Needs work » Postponed (maintainer needs more info)
FileSize
Screencast from 11-12-2023 05 43 56 ΜΜ.mp41.6 MB

Attached is a screencast with the form code from the IS, running in latest 11.x with Olivero and cannot reproduce the bug.

If someone else sees it, please write some steps to reproduce