dfalling
How does LiveView know when to remove phx-disable-with from form submits?
When submitting a form, LiveView toggles into the phx-disable-with state. Then it removes the phx-disable-with while my server’s handler is in the process of executing the phx-submit="..." handler.
What triggers the removal of that phx-disable-with? Is there any way to prevent this from happening until after my submit handler has finished? On a slow connection, my app toggles into the loading state while submitting the form as desired, but then removes this state and appears broken/waiting while my handler runs.
Thanks!
First Post!
thomas.fortes
From this link the form should be restored only after the submit has finished.
On submission of a form bound with a
phx-submitevent:
- The form’s inputs are set to
readonly- Any submit button on the form is disabled
- The form receives the
"phx-submit-loading"classOn completion of server processing of the
phx-submitevent:
- The submitted form is reactivated and loses the
"phx-submit-loading"class- The last input with focus is restored (unless another input has received focus)
- Updates are patched to the DOM as usual
What does the log show?
Are you doing something heavy in the server that would be better handled by async tasks?
Have you tried enabling livesocket debug and checking the console for errors? Maybe a timeout?
window.liveSocket = liveSocket
// in the browser's web console
liveSocket.enableDebug()
Without more info is hard to know for sure, but if it is some kind of timeout due to heavy work my suggestion would be to make everything as light as possible for the user and do the heavy work outside the main codepath.







