fix: Prevent submitting a form before saving an input into the store

[pboivin]

Description

To summarize the issue: In the create modal as well as in the main form view, when a user types into an input field and very quickly presses enter or clicks the 'Update' button, the submit event is handled before the updated value makes its way into the Vuex store.

I'm not 100% sure this is the right approach, so I've limited this to TextField for now. This could easily be extended to WYSIWYG and other fields that may be affected by this issue.

Related Issues

#1029 (comment)

#777 (comment)

[ifox]

Great stuff @pboi20! I haven't tested this yet, however reviewing the code I'm asking myself what happens for the end user. Should the submit button be disabled when preventSubmit is true?

[pboivin]

Hey @ifox, good point!

At the moment, there is no visual feedback as part of this implementation. TextField has a debounce of 250ms before updating the store, so submit is prevented/ignored from the first keypress until 250ms after the last. Here's a quick test, toggling the opacity of the button as visual feedback :

Curious to know your first impression! The WYSIWYG fields have a slower debounce time (600ms), which would cause less "flashing".

[pboivin]

Another option would be to "defer" the request to submit until the store has been updated, instead of simply ignoring it. I believe this would remove the need for any visual feedback on the disabled state.

[antonioribeiro]

I personally like the "defer" better than the visual feedback.

[ifox]

Another option would be to "defer" the request to submit until the store has been updated, instead of simply ignoring it. I believe this would remove the need for any visual feedback on the disabled state.

I think that might be a better option, I like it! Thanks for prototyping the visual feedback idea, I'm afraid the flashing isn't working.

[pboivin]

Hey @ifox and @antonioribeiro,

I've got a first draft of the deferred/delayed submit feature. The API is relatively simple:

• fields can call preventSubmit and allowSubmit
• forms can check isSubmitPrevented from the store and act accordingly

A retrySubmit mixin was extracted for the feature that is common to main-form, ModalCreate and ModalUpdate.

Leaving this as a draft for now to take some time to test more extensively. Curious to know what you think!

[ifox]

This looks great @pboi20! I will give it a try.

[pboivin]

Update:

• rebased on 2.x
• updated both WYSIWYG fields

Demo: