Safari: auto prefill keep showing

[adronitis]

• vue-autosuggest version: v2.2.0
• node version: v12.10.0
• npm (or yarn) version: 1.17.3

Relevant code or config

<div
   v-for="(item, index) in listofItems"
   :key="item.id"
>
  <vue-autosuggest
      :suggestions="[{data:['Frodo', 'Samwise', 'Gandalf', 'Galadriel', 'Faramir', 'Éowyn']}]"
      :input-props="{id:'autosuggest__input', placeholder:'Do you feel lucky, punk?'}"
      @input="onInputChange"
      @selected="selectHandler"
      @click="clickHandler"
  >  
    <template slot-scope="{suggestion}">
      <span class="my-suggestion-item">{{suggestion.item}}</span>
    </template>
  </vue-autosuggest>
</div>

What you did:

Put vue-autosuggest inside a v-for with the demo data.

What happened:

I get prompt the Safari auto prefill contact as soon as I type one letter, and there is no way I can disable it (unless in browser setting). No idea how to resolve this yet.

[darrenjennings]

to confirm, are you getting autocomplete="off" in the outputted html?

<input type="text" autocomplete="off" aria-autocomplete="list" aria-activedescendant="" aria-controls="demo-autosuggest-autosuggest__results" id="autosuggest__input" placeholder="Search" class="">

I don't use safari, but as I understand it, this is what prevents the browser for popping up suggestions.

[adronitis]

I don't believe they respect autocomplete anymore. But here is the outputted HTML code.

<input type="text" autocomplete="off" aria-autocomplete="list" aria-activedescendant="" aria-controls="autosuggest-autosuggest__results" id="autosuggest__input" placeholder="Item name" name="item_id_552" class="">

However, I made some more tests. On the codesandbox.io you provided, I cannot reproduce the issue on my Safari. But if I copy the exact same code, on my app, the prefill get pops up. I cannot conclude what conflict or issue might have, but is weird since as far as I know that only the name attribute should have an influence on this if is, name..email.. etc.