rivernews
commented
4 years ago The Cause
There aren't nested form actually. Application status and link is created using Formik's ArrayField, so it's yet another field in form, just the slot created/deleted on the fly. But eventually there's just one form, and application status are an array in formik's values; the link for each status is like a nested property in the values. Overall, no nested form, just one form, but nested (deeply) values.
So the cause is probably due to the delete icon button has a default type type=submit. In fact, that is the default type value for any HTML <button>. This cause when hitting enter, the delete icon onClick will be triggered, as it is a submit type button. Then the form main submit button Create Status got triggered afterward.
Some interesting thing is that if we leave it as-is, and hit enter, and during prompt, we say yes we want to delete field (the link dynamic field), it will delete the link field (two textfields), but will not submit the form. If we says cancel for the prompt, it will not delete link and submit the status form - which is what we want. So there's definitely some event propagation termination in there, so one is propagating, another is not.
The Solution
Quick solution will be make sure there is only one button with type of submit within the form. To ensure this, we mark all buttons as type=button except the submit button. We have to manually do this because button type is by default submit.
When in application position, the application status edit mode, seems like the application status form, and the app status link form, will conflict when press ENTER.