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'] = '