Verified Commit 8f9e0bd0 authored by Lauri Timmanee's avatar Lauri Timmanee
Browse files

Issue #2911932 by bnjmnm, arnaud-brugnon, EthanT, leslie.cordell, smustgrave,... 

Issue #2911932 by bnjmnm, arnaud-brugnon, EthanT, leslie.cordell, smustgrave, nod_: Correct vertical tab does not focus on form validation
parent 3bafeb49

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();

          }

        }

      });

    },

  };

core/modules/ckeditor5/js/ckeditor5.admin.js

+0 −17
Original line number Diff line number Diff line
@@ -1057,21 +1057,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);

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

+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}

   */

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

+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'));

  }



}