b-input doesn't work with browser autocomplete postal-code

[bramski]

Overview of the problem

Buefy version: [0.6.6]
Vuejs version: [2.5.16]
OS/Browser:

Description

When using fields to autocomplete an address form using b-input, the third field, in this case a postal code, is cleared immediately when the fields are filled.

I've isolated this down to the b-input component. If I use a native input component with VeeValidate and v-model it remains populated as expected.

Steps to reproduce

Select first field (address) and choose to autocomplete the form.
Choose address.
See that the fields are then populated.
Blur the field with intent to submit the form.

Expected behavior

The field to remain with the value.

Actual behavior

The field is cleared on blur.

Video

https://www.useloom.com/share/c15e847d4371425186ee461a97e9019e

[jtommy]

@bramski Is the issue always with the third field or a specific field ?
Could you provide us a code example ?

[bramski]

https://codepen.io/bramski/pen/pZoZmp

Lots of weird behavior. It works fine if you choose to auto-fill via the postal code. If you choose the first field then it fails.

[aishaimby]

@jtommy

I am seeing the same issue, and it seems to always be the third field, even if I move them around the last field always is cleared on selecting to autofill.

But, I noticed, if I clear the form, and try again, it will fill everything and not clear the third field. So it seems to be the first time, it clears the third one.

I tried reloading the page and selecting the third field to autofill, and it cleared the second and third, and only kept the first field. (Same if I started by filling from the second field.)

Here is my example as well, just slightly different fields: https://codepen.io/aishaimby/pen/xaGRmz

[wagich]

I'm having the same problem in my app. It seems that the 3rd and any following autocompleted fields get cleared after autofill. It seems to only count fields that get autocompleted (have a autocomplete="valid-value" attribute).

I've forked the pen from @aishaimby https://codepen.io/anon/pen/Mqwddm and added a 4th field, then disabled autocomplete on the 2nd field: the 3rd field (2nd to autofill) doesn't get cleared, but the next one is empty once again.

A second autofill attempt seems to always work for all fields.

[adrlen]

FYI, it works when using native bulma field and not the component bField. Did not find why yet.

[emkman]

Same issue. For instance it will autofill multiple address fields but clear out the last two, state and zip code. Using Chrome on Mac in my case.

[philipithomas]

I'm also running into this bug today in the same version of the library.

[mccare]

Similar issue here: 4 fields with name, address-level1 (street) address-level2 (city) and email. The result is that only name and city are filled in.

Codepen:
https://codepen.io/next2you/pen/oQYoOx

On the top is a normal form with inputs tagged for autocomplete and this works in Safari.
On the lower half there is the buefy fields. Autocomplete will add the name and the city in my case but leave everything else blank.

I guess there should be enough information to remove the label "needs more information"?

From further reading and testing: Safari guestimates on what to fill in the fields, sometimes the label in front of the field is enough to be filled in. Need to do more testing to see if this is a buefy problem or just a general input problem.

[jtommy]

@mccare I think there is an issue using b-field but we have to investigate about