Safari: conflict between custom autocomplete and system autoload

Question

We have a web page that contains text <input>to which we attach a custom auto component (more precisely, using AngularStrap Typeahead).

Safari obviously thinks that the input contains the person’s name and thus provides an autocomplete menu with values ​​populated from the system address book (a small menu at the top of the screenshot, and also notice the corresponding icon added by Safari surrounded by green).

This leads to the following problems:

• The field is called "Name", but it does not mean the names of people. Therefore, it makes no sense to offer human proposals.

• Safari's built-in menu hides our custom offer menu as shown in the screenshot below .

I tried the following to get rid of Safari suggestions:

• Change attributes nameand ida "name" to something like "title" or "GoToHellSafari". Does not help.

• Add autocomplete="off", add autocomplete="false". Does not help.

• Change the actual text in <label>to something other than "Name", for example, "Title". It works, there is no autocomplete.

• Disconnect the id-connection between <input>and its <label>by removing the attributes idand name. Does not help.

(3) , : , "". ?

Answer 1

, : fooobar.com/questions/136936/...

Answer 2

Safari :

::-webkit-contacts-auto-fill-button, ::-webkit-credentials-auto-fill-button {
    visibility: hidden;
    pointer-events: none;
    position: absolute;
    right: 0;
}

Answer 3

, . . , . , . , ...

, , Safari .., .

In the end, I found out that this is due to the extension that I installed a few days ago. So maybe you should also take a look at the extensions you have installed, one of the reasons could be the reason.

Hope this helps