Safari: Conflict between custom auto complete and system contact autofill

Question

We have a webpage which contains a text <input> to which we attach a custom auto complete component (using AngularStrap's Typeahead to be precise).

Safari obviously thinks, that the input contains a person's name and thus provides an autofill menu with values populated from the system's address book (the small menu on top in the screenshot; also notice the corresponding icon added by Safari, circled in green).

This leads to the following problems:

1. The field is titled "Name", but it is not meant to contain person names. So it makes no sense to provide person suggestions.

2. Safari's built-in menu obscures our custom suggestion menu, shown in the screenshot below Safari's suggestions.

I tried the following to get rid of the Safari suggestions:

1. Change the name and id attributes from "name" to something like "title" or "GoToHellSafari". Does not help.

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

3. Change the actual text within the <label> to something besides "Name", such as "Title". This works, the autofill is gone.

4. Cut the id-based connection between the <input> and its <label> by removing the id and name attributes. Does not help.

While option (3) looks promising, I have the following obvious issue: I want that label to read "Name". Any suggestions?

Selfwinding

Answer 1

Hide autofill Safari icon in input field:

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

Oraleeoralia

Please see existing answer. This just hides the icon, but not the menu. – Selfwinding

Answer 2

This user had a good solution, where you hide the autofill button completely: https://mcmap.net/q/281160/-how-to-hide-autofill-safari-icon-in-input-field

Cameraman

Thank you, this seems like good start. However, it only hides the icon, but not the autofill menu, which obscures my custom menu. – Selfwinding

I see. Well, if we can hide the icon, then we can probably find the menu too, and hide it. I'm too sure how to locate it though. – Cameraman

Answer 3

I know this was a few months ago. I just had today the same problem. But in my case it was a simple text field, mandatory field. And the problem was not with all the mandatory fields, just some. Spend a few hours going nuts, looking at all lines in my code...

Strange thing was my colleague, with same OS, same version of Safari etc.. did not have the same problem.

In the end, I found out it was due to an extension I had installed a few days ago. So maybe you should also have a look at the extensions you have installed, one of them might be the cause.

Hope this helps

Abhorrence