diff --git a/core/misc/states.js b/core/misc/states.js index 5dcc0d9b3b0846173f3230501e51e1834346a352..c8934dfed7f1ea402170865929712c36fe7ed4e6 100644 --- a/core/misc/states.js +++ b/core/misc/states.js @@ -683,7 +683,6 @@ // element monitoring itself. if (e.trigger) { $(e.target) - .prop('disabled', e.value) .closest('.js-form-item, .js-form-submit, .js-form-wrapper') .toggleClass('form-disabled', e.value) .find('select, input, textarea') @@ -723,7 +722,11 @@ $document.on('state:checked', (e) => { if (e.trigger) { - $(e.target).prop('checked', e.value).trigger('change'); + $(e.target) + .closest('.js-form-item, .js-form-wrapper') + .find('input') + .prop('checked', e.value) + .trigger('change'); } }); diff --git a/core/modules/system/tests/modules/form_test/src/Form/JavascriptStatesForm.php b/core/modules/system/tests/modules/form_test/src/Form/JavascriptStatesForm.php index 851c55e2fc533deabcc2713ee659c2d202dfce86..408dfc1039589255e9d48b9b93c2bddc0c2edc0d 100644 --- a/core/modules/system/tests/modules/form_test/src/Form/JavascriptStatesForm.php +++ b/core/modules/system/tests/modules/form_test/src/Form/JavascriptStatesForm.php @@ -180,6 +180,123 @@ public function buildForm(array $form, FormStateInterface $form_state) { ], ], ]; + $form['checkboxes_all_checked_when_checkbox_trigger_checked'] = [ + '#type' => 'checkboxes', + '#title' => 'Checkboxes: all checked when checkbox trigger checked', + '#options' => [ + 'value1' => 'Value 1', + 'value2' => 'Value 2', + 'value3' => 'Value 3', + ], + '#states' => [ + 'checked' => [ + ':input[name="checkbox_trigger"]' => ['checked' => TRUE], + ], + ], + ]; + $form['checkboxes_some_checked_when_checkbox_trigger_checked'] = [ + '#type' => 'checkboxes', + '#title' => 'Checkboxes: some checked when checkbox trigger checked', + '#options' => [ + 'value1' => 'Value 1', + 'value2' => 'Value 2', + 'value3' => 'Value 3', + ], + 'value1' => [ + '#states' => [ + 'checked' => [ + ':input[name="checkbox_trigger"]' => ['checked' => TRUE], + ], + ], + ], + 'value3' => [ + '#states' => [ + 'checked' => [ + ':input[name="checkbox_trigger"]' => ['checked' => TRUE], + ], + ], + ], + ]; + $form['checkboxes_all_disabled_when_checkbox_trigger_checked'] = [ + '#type' => 'checkboxes', + '#title' => 'Checkboxes: all disabled when checkbox trigger checked', + '#options' => [ + 'value1' => 'Value 1', + 'value2' => 'Value 2', + 'value3' => 'Value 3', + ], + '#states' => [ + 'disabled' => [ + ':input[name="checkbox_trigger"]' => ['checked' => TRUE], + ], + ], + ]; + $form['checkboxes_some_disabled_when_checkbox_trigger_checked'] = [ + '#type' => 'checkboxes', + '#title' => 'Checkboxes: some disabled when checkbox trigger checked', + '#options' => [ + 'value1' => 'Value 1', + 'value2' => 'Value 2', + 'value3' => 'Value 3', + ], + 'value1' => [ + '#states' => [ + 'disabled' => [ + ':input[name="checkbox_trigger"]' => ['checked' => TRUE], + ], + ], + ], + 'value3' => [ + '#states' => [ + 'disabled' => [ + ':input[name="checkbox_trigger"]' => ['checked' => TRUE], + ], + ], + ], + ]; + $form['radios_checked_when_checkbox_trigger_checked'] = [ + '#type' => 'radios', + '#title' => 'Radios checked when checkbox trigger checked', + '#options' => [ + 'value1' => 'Value 1', + 'value2' => 'Value 2', + ], + 'value1' => [ + '#states' => [ + 'checked' => [ + ':input[name="checkbox_trigger"]' => ['checked' => TRUE], + ], + ], + ], + ]; + $form['radios_all_disabled_when_checkbox_trigger_checked'] = [ + '#type' => 'radios', + '#title' => 'Radios: all disabled when checkbox trigger checked', + '#options' => [ + 'value1' => 'Value 1', + 'value2' => 'Value 2', + ], + '#states' => [ + 'disabled' => [ + ':input[name="checkbox_trigger"]' => ['checked' => TRUE], + ], + ], + ]; + $form['radios_some_disabled_when_checkbox_trigger_checked'] = [ + '#type' => 'radios', + '#title' => 'Radios: some disabled when checkbox trigger checked', + '#options' => [ + 'value1' => 'Value 1', + 'value2' => 'Value 2', + ], + 'value1' => [ + '#states' => [ + 'disabled' => [ + ':input[name="checkbox_trigger"]' => ['checked' => TRUE], + ], + ], + ], + ]; // Checkboxes trigger. $form['textfield_visible_when_checkboxes_trigger_value2_checked'] = [ diff --git a/core/tests/Drupal/FunctionalJavascriptTests/Core/Form/JavascriptStatesTest.php b/core/tests/Drupal/FunctionalJavascriptTests/Core/Form/JavascriptStatesTest.php index 80790d48f33bdfee8c8ab0d5b05acf09f2c696cf..9661433598f81ed074343143a26ffc55266b3918 100644 --- a/core/tests/Drupal/FunctionalJavascriptTests/Core/Form/JavascriptStatesTest.php +++ b/core/tests/Drupal/FunctionalJavascriptTests/Core/Form/JavascriptStatesTest.php @@ -8,6 +8,11 @@ /** * Tests the state of elements based on another elements. * + * The form being tested is JavascriptStatesForm provided by the 'form_test' + * module under 'system' (core/modules/system/tests/module/form_test). + * + * @see Drupal\form_test\Form\JavascriptStatesForm + * * @group javascript */ class JavascriptStatesTest extends WebDriverTestBase { @@ -25,7 +30,7 @@ class JavascriptStatesTest extends WebDriverTestBase { /** * {@inheritdoc} */ - protected function setUp():void { + protected function setUp(): void { parent::setUp(); // Add text formats. $filtered_html_format = FilterFormat::create([ @@ -94,6 +99,53 @@ protected function doCheckboxTriggerTests() { $text_format_invisible_format = $page->findField('text_format_invisible_when_checkbox_trigger_checked[format]'); $this->assertNotEmpty($text_format_invisible_format); + $checkboxes_all_checked_element_value1 = $page->findField('checkboxes_all_checked_when_checkbox_trigger_checked[value1]'); + $this->assertNotEmpty($checkboxes_all_checked_element_value1); + $checkboxes_all_checked_element_value2 = $page->findField('checkboxes_all_checked_when_checkbox_trigger_checked[value2]'); + $this->assertNotEmpty($checkboxes_all_checked_element_value2); + $checkboxes_all_checked_element_value3 = $page->findField('checkboxes_all_checked_when_checkbox_trigger_checked[value3]'); + $this->assertNotEmpty($checkboxes_all_checked_element_value3); + + $checkboxes_some_checked_element_value1 = $page->findField('checkboxes_some_checked_when_checkbox_trigger_checked[value1]'); + $this->assertNotEmpty($checkboxes_some_checked_element_value1); + $checkboxes_some_checked_element_value2 = $page->findField('checkboxes_some_checked_when_checkbox_trigger_checked[value2]'); + $this->assertNotEmpty($checkboxes_some_checked_element_value2); + $checkboxes_some_checked_element_value3 = $page->findField('checkboxes_some_checked_when_checkbox_trigger_checked[value3]'); + $this->assertNotEmpty($checkboxes_some_checked_element_value3); + + $checkboxes_all_disabled_element_value1 = $page->findField('checkboxes_all_disabled_when_checkbox_trigger_checked[value1]'); + $this->assertNotEmpty($checkboxes_all_disabled_element_value1); + $checkboxes_all_disabled_element_value2 = $page->findField('checkboxes_all_disabled_when_checkbox_trigger_checked[value2]'); + $this->assertNotEmpty($checkboxes_all_disabled_element_value2); + $checkboxes_all_disabled_element_value3 = $page->findField('checkboxes_all_disabled_when_checkbox_trigger_checked[value3]'); + $this->assertNotEmpty($checkboxes_all_disabled_element_value3); + + $checkboxes_some_disabled_element_value1 = $page->findField('checkboxes_some_disabled_when_checkbox_trigger_checked[value1]'); + $this->assertNotEmpty($checkboxes_some_disabled_element_value1); + $checkboxes_some_disabled_element_value2 = $page->findField('checkboxes_some_disabled_when_checkbox_trigger_checked[value2]'); + $this->assertNotEmpty($checkboxes_some_disabled_element_value2); + $checkboxes_some_disabled_element_value3 = $page->findField('checkboxes_some_disabled_when_checkbox_trigger_checked[value3]'); + + $radios_checked_element = $page->findField('radios_checked_when_checkbox_trigger_checked'); + $this->assertNotEmpty($radios_checked_element); + + // We want to select the specific radio buttons, not the whole radios field itself. + $radios_all_disabled_value1 = $this->xpath('//input[@name=:name][@value=:value]', [':name' => 'radios_all_disabled_when_checkbox_trigger_checked', ':value' => 'value1']); + $this->assertCount(1, $radios_all_disabled_value1); + // We want to access the radio button directly for the rest of the test, so + // take it out of the array we got back from xpath(). + $radios_all_disabled_value1 = reset($radios_all_disabled_value1); + $radios_all_disabled_value2 = $this->xpath('//input[@name=:name][@value=:value]', [':name' => 'radios_all_disabled_when_checkbox_trigger_checked', ':value' => 'value2']); + $this->assertCount(1, $radios_all_disabled_value2); + $radios_all_disabled_value2 = reset($radios_all_disabled_value2); + + $radios_some_disabled_value1 = $this->xpath('//input[@name=:name][@value=:value]', [':name' => 'radios_some_disabled_when_checkbox_trigger_checked', ':value' => 'value1']); + $this->assertCount(1, $radios_some_disabled_value1); + $radios_some_disabled_value1 = reset($radios_some_disabled_value1); + $radios_some_disabled_value2 = $this->xpath('//input[@name=:name][@value=:value]', [':name' => 'radios_some_disabled_when_checkbox_trigger_checked', ':value' => 'value2']); + $this->assertCount(1, $radios_some_disabled_value2); + $radios_some_disabled_value2 = reset($radios_some_disabled_value2); + // Verify initial state. $this->assertTrue($textfield_invisible_element->isVisible()); $this->assertFalse($details->hasAttribute('open')); @@ -104,6 +156,24 @@ protected function doCheckboxTriggerTests() { $this->assertFalse($checkbox_visible_element->isVisible()); $this->assertTrue($text_format_invisible_value->isVisible()); $this->assertTrue($text_format_invisible_format->isVisible()); + $this->assertFalse($checkboxes_all_checked_element_value1->isChecked()); + $this->assertFalse($checkboxes_all_checked_element_value2->isChecked()); + $this->assertFalse($checkboxes_all_checked_element_value3->isChecked()); + $this->assertFalse($checkboxes_some_checked_element_value1->isChecked()); + $this->assertFalse($checkboxes_some_checked_element_value2->isChecked()); + $this->assertFalse($checkboxes_some_checked_element_value3->isChecked()); + $this->assertFalse($checkboxes_all_disabled_element_value1->hasAttribute('disabled')); + $this->assertFalse($checkboxes_all_disabled_element_value2->hasAttribute('disabled')); + $this->assertFalse($checkboxes_all_disabled_element_value3->hasAttribute('disabled')); + $this->assertFalse($checkboxes_some_disabled_element_value1->hasAttribute('disabled')); + $this->assertFalse($checkboxes_some_disabled_element_value2->hasAttribute('disabled')); + $this->assertFalse($checkboxes_some_disabled_element_value3->hasAttribute('disabled')); + $this->assertFalse($radios_checked_element->isChecked()); + $this->assertEquals(NULL, $radios_checked_element->getValue()); + $this->assertFalse($radios_all_disabled_value1->hasAttribute('disabled')); + $this->assertFalse($radios_all_disabled_value2->hasAttribute('disabled')); + $this->assertFalse($radios_some_disabled_value1->hasAttribute('disabled')); + $this->assertFalse($radios_some_disabled_value2->hasAttribute('disabled')); // Change state: check the checkbox. $trigger->check(); @@ -117,6 +187,61 @@ protected function doCheckboxTriggerTests() { $this->assertTrue($checkbox_visible_element->isVisible()); $this->assertFalse($text_format_invisible_value->isVisible()); $this->assertFalse($text_format_invisible_format->isVisible()); + // All 3 of the other set should be checked. + $this->assertTrue($checkboxes_all_checked_element_value1->isChecked()); + $this->assertTrue($checkboxes_all_checked_element_value2->isChecked()); + $this->assertTrue($checkboxes_all_checked_element_value3->isChecked()); + // Value 1 and 3 should now be checked. + $this->assertTrue($checkboxes_some_checked_element_value1->isChecked()); + $this->assertTrue($checkboxes_some_checked_element_value3->isChecked()); + // Only value 2 should remain unchecked. + $this->assertFalse($checkboxes_some_checked_element_value2->isChecked()); + // All 3 of these should be disabled. + $this->assertTrue($checkboxes_all_disabled_element_value1->hasAttribute('disabled')); + $this->assertTrue($checkboxes_all_disabled_element_value2->hasAttribute('disabled')); + $this->assertTrue($checkboxes_all_disabled_element_value3->hasAttribute('disabled')); + // Only values 1 and 3 should be disabled, 2 should still be enabled. + $this->assertTrue($checkboxes_some_disabled_element_value1->hasAttribute('disabled')); + $this->assertFalse($checkboxes_some_disabled_element_value2->hasAttribute('disabled')); + $this->assertTrue($checkboxes_some_disabled_element_value3->hasAttribute('disabled')); + $this->assertEquals('value1', $radios_checked_element->getValue()); + // Both of these should now be disabled. + $this->assertTrue($radios_all_disabled_value1->hasAttribute('disabled')); + $this->assertTrue($radios_all_disabled_value2->hasAttribute('disabled')); + // Only value1 should be disabled, value 2 should remain enabled. + $this->assertTrue($radios_some_disabled_value1->hasAttribute('disabled')); + $this->assertFalse($radios_some_disabled_value2->hasAttribute('disabled')); + + // Change state: uncheck the checkbox. + $trigger->uncheck(); + // Verify triggered state, which should match the initial state. + $this->assertTrue($textfield_invisible_element->isVisible()); + $this->assertFalse($details->hasAttribute('open')); + $this->assertFalse($textfield_in_details->isVisible()); + $this->assertFalse($textfield_required_element->hasAttribute('required')); + $this->assertFalse($checkbox_checked_element->isChecked()); + $this->assertTrue($checkbox_unchecked_element->isChecked()); + $this->assertFalse($checkbox_visible_element->isVisible()); + $this->assertTrue($text_format_invisible_value->isVisible()); + $this->assertTrue($text_format_invisible_format->isVisible()); + $this->assertFalse($checkboxes_all_checked_element_value1->isChecked()); + $this->assertFalse($checkboxes_all_checked_element_value2->isChecked()); + $this->assertFalse($checkboxes_all_checked_element_value3->isChecked()); + $this->assertFalse($checkboxes_some_checked_element_value1->isChecked()); + $this->assertFalse($checkboxes_some_checked_element_value2->isChecked()); + $this->assertFalse($checkboxes_some_checked_element_value3->isChecked()); + $this->assertFalse($checkboxes_all_disabled_element_value1->hasAttribute('disabled')); + $this->assertFalse($checkboxes_all_disabled_element_value2->hasAttribute('disabled')); + $this->assertFalse($checkboxes_all_disabled_element_value3->hasAttribute('disabled')); + $this->assertFalse($checkboxes_some_disabled_element_value1->hasAttribute('disabled')); + $this->assertFalse($checkboxes_some_disabled_element_value2->hasAttribute('disabled')); + $this->assertFalse($checkboxes_some_disabled_element_value3->hasAttribute('disabled')); + $this->assertFalse($radios_checked_element->isChecked()); + $this->assertEquals(NULL, $radios_checked_element->getValue()); + $this->assertFalse($radios_all_disabled_value1->hasAttribute('disabled')); + $this->assertFalse($radios_all_disabled_value2->hasAttribute('disabled')); + $this->assertFalse($radios_some_disabled_value1->hasAttribute('disabled')); + $this->assertFalse($radios_some_disabled_value2->hasAttribute('disabled')); } /**