Issue #2911932 by bnjmnm, arnaud-brugnon, EthanT, leslie.cordell, smustgrave,... (44e5b434) · Commits · project / drupal

core/misc/vertical-tabs.js

+15 −0

Original line number	Diff line number	Diff line
		@@ -118,6 +118,21 @@
		}
		},
		);

		// If a validation error is within a vertical tab, open that tab.
		context.querySelectorAll('details .form-item .error').forEach((item) => {
		const details = item.closest('details');

		if (details.style.display === 'none') {
		const tabSelect = document.querySelector(
		"[href='#".concat(details.id, "']"),
		);

		if (tabSelect) {
		tabSelect.click();
		}
		}
		});
		},
		};

+0 −17

Original line number	Diff line number	Diff line
		@@ -1049,21 +1049,4 @@
		// Call the original behavior.
		originalFilterStatusAttach(context, settings);
		};

		// Activates otherwise-inactive tabs that have form elements with validation
		// errors.
		// @todo Remove when https://www.drupal.org/project/drupal/issues/2911932 lands.
		Drupal.behaviors.tabErrorsVisible = {
		attach(context) {
		context.querySelectorAll('details .form-item .error').forEach((item) => {
		const details = item.closest('details');
		if (details.style.display === 'none') {
		const tabSelect = document.querySelector(`[href='#${details.id}']`);
		if (tabSelect) {
		tabSelect.click();
		}
		}
		});
		},
		};
		})(Drupal, drupalSettings, jQuery, JSON, once, Sortable, tabbable);

+13 −0

Original line number	Diff line number	Diff line
		@@ -44,9 +44,22 @@ public function buildForm(array $form, FormStateInterface $form_state) {
		'#type' => 'textfield',
		'#title' => 'Second nested element in details element',
		];
		$form['submit'] = [
		'#type' => 'submit',
		'#value' => 'Save',
		];
		return $form;
		}

		/**
		* {@inheritdoc}
		*/
		public function validateForm(array &$form, FormStateInterface $form_state) {
		if ($form_state->getValue('element_2') === 'bad') {
		$form_state->setErrorByName('element_2', $this->t('there was an error'));
		}
		}

		/**
		* {@inheritdoc}
		*/

+29 −0

Original line number	Diff line number	Diff line
		@@ -135,4 +135,33 @@ public function testDetailsChildVisibility() {
		$this->assertEquals('true', $summary->getAttribute('aria-pressed'));
		}

		/**
		* Confirms tabs containing a field with a validation error are open.
		*/
		public function testVerticalTabValidationVisibility() {
		$page = $this->getSession()->getPage();
		$assert_session = $this->assertSession();

		$this->drupalGet('form-test/group-vertical-tabs');
		$page->clickLink('Second group element');
		$input_field = $assert_session->waitForField('element_2');
		$this->assertNotNull($input_field);

		// Enter a value that will trigger a validation error.
		$input_field->setValue('bad');

		// Switch to a tab that does not have the error-causing field.
		$page->clickLink('First group element');
		$this->assertNotNull($assert_session->waitForElementVisible('css', '#edit-meta'));

		// Submit the form.
		$page->pressButton('Save');

		// Confirm there is an error.
		$assert_session->waitForText('there was an error');

		// Confirm the tab containing the field with error is open.
		$this->assertNotNull($assert_session->waitForElementVisible('css', '[name="element_2"].error'));
		}

		}