Race condition on AJAX change event and form submission

I'm wondering if there's a step missing from the steps to reproduce? Tried to follow the steps but it looks like validation is preventing this from happening. Also looked at the code and didn't find anything risky in the field type.

So if we enter any negative value in the given field( which updates the message shown using Ajax) and save the form directly without waiting for the Ajax response then it saves the form even after the message is shown up. I'll write a test to demonstrate this.

Rebased to run test-only feature

1) Drupal\Tests\datetime\FunctionalJavascript\AllowedValuesForDateFieldTypeTest::testAllowedValuesFormValidation
Behat\Mink\Exception\ResponseTextException: The text "Limit must be higher than or equal to 1." was not found anywhere in the text of the current page.
/builds/issue/drupal-3397594/vendor/behat/mink/src/WebAssert.php:811
/builds/issue/drupal-3397594/vendor/behat/mink/src/WebAssert.php:262
/builds/issue/drupal-3397594/core/modules/datetime/tests/src/FunctionalJavascript/AllowedValuesForDateFieldTypeTest.php:66
/builds/issue/drupal-3397594/vendor/phpunit/phpunit/src/Framework/TestResult.php:728
ERRORS!
Tests: 1, Assertions: 4, Errors: 1.

Which is good.

Manually testing I can confirm the issue following the steps in the issue summary.
Applying the MR I was unable to advance the form and got the correct error message.

Discussed this issue with @lauriii. This issue can cause a problem for list fields where you enter some values in the allowed values and then press submit and they are not saved as you've pressed the submit before the ajax has run. So this causes data loss - hence making it critical.

I'm not sure about the fix as form.js is loaded on every form.

Thanks @Utkarsh_33! I looked into the APIs AJAX system provides and couldn't figure out a better way to do this in the Field UI module. Maybe this is something the AJAX system should handle so that we wouldn't have to override and listen to the AJAX events? Can we file a follow-up to investigate a better solution. This seems fine since it addresses a critical bug.

Double click prevention was added in 🐛 Double click prevention on form submission Fixed in 2014. There are open issues like #3251249: Should double-click prevention return early when isDefaultPrevented? → . I have no idea if that prevention is supposed to work in that situation and is broken, or never worked for it though.

This is different from the double click scenario. This is when you have two events triggered at the same time. This can happen with blur/change event listeners when users clicks a button that triggers the click event. What the MR does is it marks the submit button (in Field UI specifically) disabled while the other AJAX request is triggering to avoid the race condition caused by triggering multiple events at once.

I think this is good for now - it's a specific fix caused by the issue of have field storage and field config on the same form. I think there is a possible follow up to think about whethere we should prevent all form submission whilst we're ajaxing.

Committed and pushed 27f9fa664c0 to 11.x and 07830391275 to 10.2.x. Thanks!

I have opened a follow-up for finding a better(more generic) solution this problem in Find a generic way to resolve race condition on AJAX change event and form submission 🐛 Find a generic way to resolve race condition on AJAX change event and form submission Active .

Automatically closed - issue fixed for 2 weeks with no activity.