Fix frontend crash on form submissions that wait for uploads to complete #2865
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This fixes an issue we discovered at Felt, which was introduced in phoenixframework#2490. The symptoms were as follows: - Given a form with an image upload, if you waited until the upload completed before submitting the form, the submission would work as expected. - However, if you submitted before the upload completed, you'd see the submission correctly wait until the upload hit 100%, then you'd get a JavaScript crash and the app would go dead. The JavaScript console produced an error like this in release: ``` TypeError: r.hasAttribute is not a function. (In 'r.hasAttribute("name")', 'r.hasAttribute' is undefined) ``` The error in dev, of course, was more descriptive: ``` submitter.hasAttribute is not a function Call Stack serializeForm node_modules/phoenix_live_view/priv/static/phoenix_live_view.esm.js:2402:30 pushFormSubmit node_modules/phoenix_live_view/priv/static/phoenix_live_view.esm.js:3308:35 push node_modules/phoenix_live_view/priv/static/phoenix_live_view.esm.js:3293:29 triggerAwaitingSubmit node_modules/phoenix_live_view/priv/static/phoenix_live_view.esm.js:3236:7 pushInput/ node_modules/phoenix_live_view/priv/static/phoenix_live_view.esm.js:3223:18 uploadFiles/ node_modules/phoenix_live_view/priv/static/phoenix_live_view.esm.js:3325:11 initAdapterUpload/this._entries node_modules/phoenix_live_view/priv/static/phoenix_live_view.esm.js:895:16 onDone/this._onDone node_modules/phoenix_live_view/priv/static/phoenix_live_view.esm.js:769:7 progress/< node_modules/phoenix_live_view/priv/static/phoenix_live_view.esm.js:745:16 finish node_modules/phoenix_live_view/priv/static/phoenix_live_view.esm.js:3034:18 ``` Inspecting the code, it looks like the argument order got swapped in the case where uploads are in progress at form submission time. I'm not sure how to write an adequate test to cover this, but I can confirm that the fix when applied to my codebase does indeed fix the issue.
|
❤️❤️❤️🐥🔥 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This fixes an issue we discovered at Felt, which was introduced in #2490.
The symptoms were as follows:
The JavaScript console produced an error like this in release:
The error in dev, of course, was more descriptive:
Comparing the call to
this.pushFormSubmit()versus the definition ofpushFormSubmit(), it looks like the argument order got swapped in the case where uploads are in progress at form submission time.I'm not sure how to write an adequate test to cover this, but I can confirm that the fix when applied to my codebase does indeed fix the issue.