diff --git a/core/modules/field_ui/js/field_ui.js b/core/modules/field_ui/js/field_ui.js index bc7d6efe2af6..940eac3e096f 100644 --- a/core/modules/field_ui/js/field_ui.js +++ b/core/modules/field_ui/js/field_ui.js @@ -102,6 +102,32 @@ }, }; + // Override the beforeSend method to disable the submit button until + // the AJAX request is completed. This is done to avoid the race + // condition that is being caused by change event listener that is + // attached to every form element inside field storage config edit + // form to update the field config form based on changes made to the + // storage settings. + const originalAjaxBeforeSend = Drupal.Ajax.prototype.beforeSend; + // eslint-disable-next-line func-names + Drupal.Ajax.prototype.beforeSend = function () { + // Disable the submit button on AJAX request initiation. + $('.field-config-edit-form [data-drupal-selector="edit-submit"]').prop( + 'disabled', + true, + ); + // eslint-disable-next-line prefer-rest-params + return originalAjaxBeforeSend.apply(this, arguments); + }; + // Re-enable the submit button after AJAX request is completed. + // eslint-disable-next-line + $(document).on('ajaxComplete', () => { + $('.field-config-edit-form [data-drupal-selector="edit-submit"]').prop( + 'disabled', + false, + ); + }); + /** * Namespace for the field UI overview. * diff --git a/core/modules/field_ui/src/Form/FieldConfigEditForm.php b/core/modules/field_ui/src/Form/FieldConfigEditForm.php index 79b0cc453962..647f0d62aa91 100644 --- a/core/modules/field_ui/src/Form/FieldConfigEditForm.php +++ b/core/modules/field_ui/src/Form/FieldConfigEditForm.php @@ -259,6 +259,7 @@ class FieldConfigEditForm extends EntityForm { } $form['#prefix'] = '
'; $form['#suffix'] = '
'; + $form['#attached']['library'][] = 'field_ui/drupal.field_ui'; return $form; } diff --git a/core/modules/field_ui/tests/src/FunctionalJavascript/ManageFieldsTest.php b/core/modules/field_ui/tests/src/FunctionalJavascript/ManageFieldsTest.php index 4be9ffcf2faf..21195579ab1e 100644 --- a/core/modules/field_ui/tests/src/FunctionalJavascript/ManageFieldsTest.php +++ b/core/modules/field_ui/tests/src/FunctionalJavascript/ManageFieldsTest.php @@ -2,6 +2,7 @@ namespace Drupal\Tests\field_ui\FunctionalJavascript; +use Drupal\field\Entity\FieldConfig; use Drupal\field\Entity\FieldStorageConfig; use Drupal\FunctionalJavascriptTests\WebDriverTestBase; use Drupal\Tests\field_ui\Traits\FieldUiJSTestTrait; @@ -325,4 +326,26 @@ class ManageFieldsTest extends WebDriverTestBase { } } + /** + * Tests the form validation for allowed values field. + */ + public function testAllowedValuesFormValidation() { + FieldStorageConfig::create([ + 'field_name' => 'field_text', + 'entity_type' => 'node', + 'type' => 'text', + ])->save(); + FieldConfig::create([ + 'field_name' => 'field_text', + 'entity_type' => 'node', + 'bundle' => 'article', + ])->save(); + $this->drupalGet('/admin/structure/types/manage/article/fields/node.article.field_text'); + $page = $this->getSession()->getPage(); + $page->findField('edit-field-storage-subform-cardinality-number')->setValue('-11'); + $page->findButton('Save settings')->click(); + $this->assertSession()->assertWaitOnAjaxRequest(); + $this->assertSession()->pageTextContains('Limit must be higher than or equal to 1.'); + } + }