b-input shows validation error on focus instead of blur

[darkylmnx]

Overview of the problem

Buefy version: [0.9.19]
Vuejs version: [2.6.14]
OS/Browser: Chrome

Description

On focus of any input with "required" attribute, it immediately shows an error.
Even on the docs it happens: https://buefy.org/documentation/input#validation
On the field called "user handle".

Steps to reproduce

Create a <b-input required /> and focus it.

Expected behavior

The message is suppose to show on blur, not on focus as stated in the docs.

Actual behavior

https://jsfiddle.net/qfLtb70n/

[lucraraujo]

I find it annoying too, but there is a way to change this behavior. You can either:
Set the defaultUseHtml5Validation option to false on your constructor options to stop this behavior system wide or use the use-html5-validation attribute on your b-input element. Something like this:

<b-input 
:use-html5-validation="false"
required
/>

[darkylmnx]

@lucraraujo this doesn't work for me since I want the validations.
It is a bug since before in previous versions I had no issue with that, it did this on blur and not on focus.

[lucraraujo]

Yep! You're right! I just realized this. The problem is here:

buefy/src/utils/FormElementMixin.js

Line 117 in deaa4a8

this.checkHtml5Validity()

I'm trying to find if there are other side effects is I remove this line.

[darkylmnx]

It seems to have been added in v0.9.9: https://github.com/buefy/buefy/blob/v0.9.9/src/utils/FormElementMixin.js

The commit tied to it was: cb0868b

And I don't see how number validation and when the validation starts are related.

Can you enlighten us @fabiofdsantos ?

[fabiofdsantos]

I think it was related to #3059 but maybe a bug has been introduced on the "fix".