Issue #3397594 by Utkarsh_33, lauriii: Race condition on AJAX change event and form submission

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.
    *

core/modules/field_ui/src/Form/FieldConfigEditForm.php

@@ -259,6 +259,7 @@ public function form(array $form, FormStateInterface $form_state) {
     }
     $form['#prefix'] = '<div id="field-combined">';
     $form['#suffix'] = '</div>';
+    $form['#attached']['library'][] = 'field_ui/drupal.field_ui';
     return $form;
   }
 

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 @@ public function testFieldTypeOrder() {
     }
   }
 
+  /**
+   * 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.');
+  }
+
 }