Form won't submit if submit button moves position due to onBlur validation changes

[emmalivingstone]

Describe the bug
I'm unsure if this is a bug or if there could be a workaround here-

I set up a form with onBlur required validation that has error messages which push the submit button down when they appear
I focus a field then click somewhere else to blur the field
The error message appears and pushes the submit button down
I focus the field again and type something to satisfy the required validation
Without clicking anywhere else, I click the submit button
The validation message is removed, the submit button moves position because of this, but the form is not submitted.
However, if I submit the form using the 'enter' key in this situation instead, the validation messages are removed and form is submitted successfully.

To Reproduce
Steps to reproduce the behavior:

1. Go to the sandbox
2. Fill in the first 2 fields in the form
3. Focus the email field then blur it so the validation message appears
4. Focus the email field again and type something in
5. Click the submit button straight away - no alert appears to indicate the form has been submitted

Codesandbox link (Required)
https://codesandbox.io/s/react-hook-form-validation-onblur-forked-902lt?file=/src/index.js

Expected behavior
The form should still be submitted to match the behaviour when you press the enter key.

Desktop (please complete the following information):

• OS: iOS
• Browser Chrome
• Version 88

[leapful]

@emmalivingstone : No, it's not a bug.

With mode "onBlur", any action that causes losing focus on field, like clicking on Submit button, will trigger the validation on form. At that time, all fields are valid, therefore, the previous error message will disappear and shift the position of Submit button. The event "onClick" is targeting on old position of Submit button but now that position has no button, that's why submit handler is not triggered.

The workaround, a.k.a best practice for validation on vertical form is to always show bottom spacing even if there is no error message to avoid shifting position (bad for user experience).

Working sample:https://codesandbox.io/s/react-hook-form-validation-onblur-forked-379lw?file=/src/index.js

[emmalivingstone]

Okay, fair enough - showing spacing all the time is not a viable option for me so I'll have to find another way around it. Thanks.

[bluebill1049]

Thanks very much @leapful