username autofill is triggered on unrelated form fields

• Component: Forms
• Status: RESOLVED INVALID

[Martin Häcker]

Created attachment 432139 [details]
screenshot of autofill

I have a select2.org select list for a form on my website, whenever I open it on the Mac, Safari helpfully tries to autofill my username into it.

This is quite annoying as that

a) is wrong, this is a search filed for something completely unrelated to usernames and passwords
b) hides content that the user needs to read to fill the form correctly
c) can't be easily hidden by the user (escape closes the username autofill, but also the select2 box

So the question is: how do I tell safari that this is indeed not a username field, but just a humble text field not related to usernames and passwords?

The source in question looks like this:

-- snip --
<span class="select2-container select2-container--default select2-container--open" style="position: absolute; top: 200px; left: 463.1875px;">
    <span class="select2-dropdown select2-dropdown--above" dir="ltr" style="width: 729px;">
        <span class="select2-search select2-search--dropdown">
            <input class="select2-search__field" type="search" tabindex="0" autocomplete="off" autocorrect="off" autocapitalize="none" spellcheck="false" role="textbox">
        </span>
        <span class="select2-results">
            <ul class="select2-results__options" role="tree" id="select2-deformField6-results" aria-expanded="true" aria-hidden="false">
                <li class="select2-results__option" id="select2-deformField6-result-hdkq-ConfigurableFormat" title="Simple multiplayer quiz without dramaturgy elements like jackpot." role="treeitem" aria-selected="false">Einfaches Spiel</li>
                <li class="select2-results__option" id="select2-deformField6-result-zgrn-EndlessGameFormat" title="EndlessGameFormat" role="treeitem" aria-selected="false">EndlessGameFormat</li>
                <li class="select2-results__option" id="select2-deformField6-result-s7a6-ExplodingFormat" title="ExplodingFormat" role="treeitem" aria-selected="false">ExplodingFormat</li>
                <li class="select2-results__option" id="select2-deformField6-result-32bc-QuestionnaireFormat" title="Simple single player quiz that asks a series of questions." role="treeitem" aria-selected="false">Fragebogen</li>
                <li class="select2-results__option" id="select2-deformField6-result-t2qc-NonRepeatingQuestionnaireFormat" title="Simple single player quiz that asks a series of questions without allowing repetiton of questions." role="treeitem" aria-selected="false">Fragebogen ohne Wiederholung</li>
                <li class="select2-results__option select2-results__option--highlighted" id="select2-deformField6-result-4al4-JackpotFormat" title="Simple multiplayer game with enhanced dramaturgy through jackpot betting." role="treeitem" aria-selected="true">Jackpot Spiel</li>
                <li class="select2-results__option" id="select2-deformField6-result-0zjb-PlayerLimitedFormat" title="PlayerLimitedFormat" role="treeitem" aria-selected="false">PlayerLimitedFormat</li>
                <li class="select2-results__option" id="select2-deformField6-result-eeal-PluginTestFormat" title="PluginTestFormat" role="treeitem" aria-selected="false">PluginTestFormat</li>
                <li class="select2-results__option" id="select2-deformField6-result-wolh-ExamFormat" title="Single player exam. It asks all questions in its topics without allowing repetitons." role="treeitem" aria-selected="false">Prüfung</li>
                <li class="select2-results__option" id="select2-deformField6-result-51c7-QuestionLoadingFormat" title="Simple multiplayer quiz without dramaturgy elements like jackpot." role="treeitem" aria-selected="false">QuestionLoadingFormat</li>
                <li class="select2-results__option" id="select2-deformField6-result-3tjp-LectureFormat" title="Multiplayer quiz completely controlled by a trainer." role="treeitem" aria-selected="false">Vortragsbegleitendes Spiel</li>
            </ul>
        </span>
    </span>
</span>
-- snap --

The problematic text-field is `<input class="select2-search__field" type="search" tabindex="0" autocomplete="off" autocorrect="off" autocapitalize="none" spellcheck="false" role="textbox">` which to me, doesn't look at all like a username / password field. But who knows.

I have searched around, and there are quite some search results on hacks to try and capture safari autofill in visually hidden fields. However I would rather not use a hack here, as this field is field is just a normal field and not a username / password field.

This is also reliably reproducible in the current Safari Technology Preview Release 126 (Safari 14.2, WebKit 16612.1.17.10.5).

As this bug manifests itself is in the admin UI of our website, I am hesitant to put credentials into this bug report. I can however provide credentials and urls to the application that provides this behaviour on request to trusted community members.

Screenshot of the problem provided as attachment.

[Alexey Proskuryakov]

Autofill is a Safari feature, could you please report this to Apple via https://feedbackassistant.apple.com?

I understand that you have a question, I'm just not sure if anyone can answer it here. https://discussions.apple.com is one place to try.