Chrome ignores autocomplete="off" for select2

Question

Tried several methods of disabling autocomplete and Chrome still ignores it when using jQuery Select2 input.

I tried inserting another input field (and using display: none) before the real input to try to trick Chrome, this didn't seem to work either.

Here is how the input looks now:

<input type="text" autocomplete="off" autocorrect="off" 
autocapitalize="off" spellcheck="false" class="select2-input select2-default" id="s2id_autogen2" placeholder="" style="width: 283px;" aria-activedescendant="select2-result-label-3">

When clicking on the field, at least half the time Chrome will try to autocomplete it with my phone numbers saved in Chrome. Any ideas how to disable it? It also inhibits the Select2 use as it covers it's options up.

Most browsers ignore `autocomplete=off` these days. – Barmar Jun 27 '19 at 16:58 — Barmar, Jun 27 '19 at 16:58
Were you able to come up with a fix? – The_Outsider May 14 '20 at 18:10 — The_Outsider, May 14 '20 at 18:10

score 3 · Answer 1 · answered Mar 15 '20 at 17:55

It's Simple try it

<script type="text/javascript" charset="UTF-8">
$(document).ready(function(){
    $( document ).on( 'focus', ':input', function(){
        $( this ).attr( 'autocomplete', 'new-password' );
    }); 
    $( "input.select2-input" ).attr( 'autocomplete', 'new-password' );

});
</script>

score 1 · Answer 2 · answered Jul 19 '19 at 09:40

1

Simply wrap your input in <form autocomplete="off">

<form autocomplete="off">
    <input type="text" ...>
</form>

answered Jul 19 '19 at 09:40

Zw1d

41
5

score 1 · Answer 3 · answered Aug 02 '22 at 17:38

This is kind of a complicated situation relating to Chrome's autofill. There are ways to prevent Chrome's autofill, as discussed in this thread. The one that works for me is setting the autocomplete attribute to a semantic descriptor like "new-phone-number", like:

<input type="text" autocomplete="new-phone-number">

Anyways, I stumbled on this thread as Chrome was autofilling my select2 search-field with stored e-mails from its in-built password manager. My code was laid out as:

<input type="email" name="email" autocomplete="new-email">
<select id="select2">...</select>
<input type="password" name="password" autocomplete="new-password">

When clicking the password input, Chrome will show a list of saved passwords and autofill them - but since it can't identify which are the "email" and "password" inputs due to the semantic descriptors, Chrome will try to fill the saved e-mail to whatever text field immediately precedes the password input.

So, the fix is quite simple:

<select id="select2">...</select>
<input type="email" name="email" autocomplete="new-email">
<input type="password" name="password" autocomplete="new-password">

Hope this helps someone.

score 0 · Answer 4 · answered Jul 19 '19 at 09:54

Chrome ignores the style="display: none"; or style="visibility: hidden"; attributes

Try something like:

     <input type="password" style="opacity: 0;position: absolute;">
     <input style="opacity: 0;position: absolute;">

Chrome autocompletes <input type="password"> and <input>.

<input style="display:none">
<input type="password" style="display:none">

Chrome ignores autocomplete="off" for select2

4 Answers4