Issue #3354998 by phthlaap, Liam Morland, jedihe, gapple, smustgrave: #states... (abc51fb9) · Commits · project / drupal

core/misc/states.js

+4 −1

Original line number	Diff line number	Diff line
		@@ -681,11 +681,14 @@
		$document.on('state:disabled', (e) => {
		// Only act when this change was triggered by a dependency and not by the
		// element monitoring itself.
		const tagsSupportDisable =
		'button, fieldset, optgroup, option, select, textarea, input';
		if (e.trigger) {
		$(e.target)
		.closest('.js-form-item, .js-form-submit, .js-form-wrapper')
		.toggleClass('form-disabled', e.value)
		.find('select, input, textarea')
		.find(tagsSupportDisable)
		.addBack(tagsSupportDisable)
		.prop('disabled', e.value);
		}
		});

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

+55 −0

Original line number	Diff line number	Diff line
		@@ -557,6 +557,61 @@ public function buildForm(array $form, FormStateInterface $form_state) {
		],
		];

		$form['test_button_disabled'] = [
		'#type' => 'container',
		];

		$form['test_button_disabled']['submit_button'] = [
		'#type' => 'submit',
		'#value' => 'Submit button disabled when checkbox not checked',
		'#states' => [
		'disabled' => [':input[name="checkbox_enable_submit_button"]' => ['checked' => FALSE]],
		],
		];
		$form['test_button_disabled']['checkbox_enable_submit_button'] = [
		'#type' => 'checkbox',
		'#title' => 'Enable input submit',
		];

		$form['test_button_disabled']['input_textfield'] = [
		'#type' => 'textfield',
		'#title' => 'Text field disabled when checkbox not checked',
		'#states' => [
		'disabled' => [':input[name="checkbox_enable_input_textfield"]' => ['checked' => FALSE]],
		],
		];
		$form['test_button_disabled']['checkbox_enable_input_textfield'] = [
		'#type' => 'checkbox',
		'#title' => 'Enable text field',
		];

		$form['test_button_disabled']['test_select_disabled'] = [
		'#type' => 'select',
		'#title' => 'Select disabled when checkbox not checked',
		'#options' => [
		0 => 0,
		1 => 1,
		],
		'#states' => [
		'disabled' => [':input[name="checkbox_enable_select"]' => ['checked' => FALSE]],
		],
		];
		$form['test_button_disabled']['checkbox_enable_select'] = [
		'#type' => 'checkbox',
		'#title' => 'Enable select',
		];
		$form['test_button_disabled']['test_textarea_disabled'] = [
		'#type' => 'textarea',
		'#title' => 'Textarea disabled when checkbox not checked',
		'#states' => [
		'disabled' => [':input[name="checkbox_enable_textarea"]' => ['checked' => FALSE]],
		],
		];
		$form['test_button_disabled']['checkbox_enable_textarea'] = [
		'#type' => 'checkbox',
		'#title' => 'Enable textarea',
		];

		return $form;
		}

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

+44 −0

Original line number	Diff line number	Diff line
		@@ -71,6 +71,7 @@ public function testJavascriptStates() {
		$this->doSelectTriggerTests();
		$this->doMultipleTriggerTests();
		$this->doNestedTriggerTests();
		$this->doElementsDisabledStateTests();
		}

		/**
		@@ -493,4 +494,47 @@ protected function doNestedTriggerTests() {
		$this->assertEquals('1', $radios_opposite2->getValue());
		}

		/**
		* Tests the submit button, select and textarea disabled states.
		*
		* The element should be disabled when visit the form
		* then they should enable when trigger by a checkbox.
		*/
		public function doElementsDisabledStateTests(): void {
		$this->drupalGet('form-test/javascript-states-form');
		$session = $this->assertSession();

		// The submit button should be disabled when visit the form.
		$button = $session->elementExists('css', 'input[value="Submit button disabled when checkbox not checked"]');
		$this->assertTrue($button->hasAttribute('disabled'));

		// The submit button should be enabled when the checkbox is checked.
		$session->elementExists('css', 'input[name="checkbox_enable_submit_button"]')->check();
		$this->assertFalse($button->hasAttribute('disabled'));

		// The text field should be disabled when visit the form.
		$textfield = $session->elementExists('css', 'input[name="input_textfield"]');
		$this->assertTrue($textfield->hasAttribute('disabled'));

		// The text field should be enabled when the checkbox is checked.
		$session->elementExists('css', 'input[name="checkbox_enable_input_textfield"]')->check();
		$this->assertFalse($textfield->hasAttribute('disabled'));

		// The select should be disabled when visit the form.
		$select = $session->elementExists('css', 'select[name="test_select_disabled"]');
		$this->assertTrue($select->hasAttribute('disabled'));

		// The select should be enabled when the checkbox is checked.
		$session->elementExists('css', 'input[name="checkbox_enable_select"]')->check();
		$this->assertFalse($select->hasAttribute('disabled'));

		// The textarea should be disabled when visit the form.
		$textarea = $session->elementExists('css', 'textarea[name="test_textarea_disabled"]');
		$this->assertTrue($textarea->hasAttribute('disabled'));

		// The textarea should be enabled when the checkbox is checked.
		$session->elementExists('css', 'input[name="checkbox_enable_textarea"]')->check();
		$this->assertFalse($textarea->hasAttribute('disabled'));
		}

		}