Vue Multiselect autocomplete issue

Question

I have been using [vue-multiselect]

[1]: https://www.npmjs.com/package/vue-multiselect. In a form I have multiple multiselect dropdowns. The main problem is browser's autocomplete behaviour. I either want to turn it off or want it to work as expected. I tried to disable autocomplte by

  autocomplete="off"
 // autocomplete="nope"
//autocomplete="random-text"

but none of them are working. Or if we keep autocomplete behaviour as it is then on select of multiselect input's autosuggestion I get other inputs auto populate by browser except for other multiselect inputs. Other multiselect does not allow autofill of values in other multiselects given by browser when any autosuggestion from first multiselect is selected. For example, I have three multiselects : State, District , City On selection of State I get auto suggestions from browser. On mouse hover of one of them I get District and City autofill in District and City which I have filled previously. But when I select the Autosuggestion value from State (ofcourse given by browser not me) then I get all the values from State, District and City to be blank which is bad for the user. Please, suggest some technique or work around so that I can either disable autocomplete behaviour of browser or can auto select in all the three multiselect dropdowns.

Answer 1

In HTML Code

onFocus={handleFocus}

In Script File

handleFocus = e => { e.target.setAttribute("autocomplete", "nope"); };