VeeValidate v3 prevents clicks on blur validation - vue.js

Question

I have form with autofocus on first field.
I'm using the eager validation mode.
The issue is that when I click anywhere on the page, input loses focus and gets validate and cancels the click on the page.
Is there a way to somehow allow blur with empty value, unless I call validation manually on submit?
My code snippet:
<b-form-group id="input-group-2" label="Your name:" label-for="input-2">
<validation-provider name="name" rules="required|min:2" mode="eager" v-slot="{ errors }">
<b-form-input
id="input-2"
v-model="credentials.name"
placeholder="Your name"
:class="{'is-invalid' : errors.length}"
autofocus
/>
<b-form-invalid-feedback :state="!errors.length">{{errors[0]}}</b-form-invalid-feedback>
</validation-provider>
</b-form-group>

Answer 1

I would like to make something clear, vee-validate doesn't prevent "click" events, it's just that when you are clicking outside, you are blurring the field. Thus triggering validation when the error message appears, it pushes the other elements down due to its line-height, which pushes the button/link down, causing you to click outside.
I would say this is not a vee-validate issue, but rather a CSS problem, ideally, if you are displaying error messages underneath the fields you should compensate for the additional space to prevent the UI from jumping which is annoying to users as well.
A simple margin-bottom equal to the line-height of the error message should do the trick, another approach is to have an absolute error message with a relative wrapper around them, have a bottom padding equal to the line-height and it would work as well.
.InputMargin:not(.has-error) {
margin-bottom: 16px;
}
.InputPadding:not(.has-error) {
position: relative;
padding-bottom: 16px;
}
.InputPadding:not(.has-error) span {
position: absolute;
bottom: 0;
left: 0;
}
You view the sample here: https://jsfiddle.net/logaretm/4mx0hy58/17/
Now if your UI framework of choice doesn't handle this case, you could PR it for them or open an issue in their project tracker.

Answer 2

Ended up avoiding automatic validation, switched to passive mode instead of eager. In the config file with this line:
setInteractionMode('passive');
I just call validate manually on submit:
async onSubmit() {
const isValid = await this.$refs.observer.validate();