Unverified Commit fdb1fa9f authored by Lauri Timmanee's avatar Lauri Timmanee
Browse files

Issue #994360 by DuaelFr, gapple, dww, andypost, lauriii, emosbaugh,... 

Issue #994360 by DuaelFr, gapple, dww, andypost, lauriii, emosbaugh, timisoreana, Cyberwolf, esclapes, damien_vancouver, longwave, catch: #states cannot check/uncheck checkboxes elements
parent 312e5891

core/misc/states.js

+5 −2
Original line number Diff line number Diff line
@@ -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');

    }

  });

core/modules/system/tests/modules/form_test/src/Form/JavascriptStatesForm.php

+117 −0
Original line number Diff line number Diff line
@@ -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'] = [

core/tests/Drupal/FunctionalJavascriptTests/Core/Form/JavascriptStatesTest.php

+126 −1
Original line number Diff line number Diff line
@@ -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 {
@@ -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'));

  }



  /**