I have a LiveView form, which does all the neat stuff. Validates, recalculates, adapts, etc. All nice. As it reacts also to some alphanumeric inputs from the user, there is a phx_debounce on inputs requiring alphanumerical entry. That’s also all good. The problem starts when the user enters a new value from the keyboard somewhere and submits the form so fast that that the change event after the keyboard entry doesn’t have a chance to do its job and update whatever needs to be updated on the form before submitting it.
What fix or workaround would you suggest? Is there a way of queueing those events somehow, maybe?
I’d use a hook and deal with both situations explicitly. Listen to inputs/their debounce as well as submits and handle the transformation for both.
Doesn’t submitting the form always send the current data for all inputs to the server? Do you have side-effects in the change event that are not reflected in the submit event?
Yes, there is for example a bidirectional recalculation between fields in the form. User can enter numbers in one of the fields and get result in the second. BUT he can also enter numbers in the second field and get (another) result in the first one.
I am not sure how that would help. Probably I don’t understand the way you’d employ the hook. Could you elaborate a bit on that?
Could you disable the submit button whenever there’s a LV form change event in flight – maybe based on the "phx-change-loading" CSS class that gets added? You might also need to disable the submit button when either of the input fields with bidrectional recalculation has focus due to the phx-debounce.
I am not sure. Maybe. But wouldn’t that be also prone to races?
