autocomplete="off" is broken, use another value like autocomplete="nonono". Also add autofill="nonono"

[lacymorrow]

Browsers don't respect autocomplete="off" and try to autocomplete inputs, which blocks the dropdown. Instead you should use any other value like autocomplete="no" or autocomplete="justdontuseoff".

I'd also recommend adding autofill="no" to the input as well.

Sorry, don't have time to create a demo.

With autocomplete="off":

With any other value than false or off:

Steps to reproduce:

1. Create a select for country options. Browsers use heuristics to determine what has what purpose but a <select id="country"> should work
2. The "selectized" input tries to autocomplete if clicked directly in the input box.
3. Change the property to autocomplete="no" and watch the madness evaporate.

---

I did:

• Search for if my issue has already been submitted
• Make sure I'm reporting something precise that needs to be fixed
• Give my issue a descriptive and concise title
• Create a minimal working example on JsFiddle or Codepen
  (or gave a link to a demo on the Selectize docs)
• Indicate precise steps to reproduce in numbers and the result,
  like below

[ptomli]

Why does this change unconditionally add autocomplete="new-password"

[JohnRoux]

Apart from being incorrect and unconfigurable, this is causing havoc with extensions that listen for password autocompletes.

For Last Pass I ended up having to add this to forcably remove the autocomplete and force the last pass extension to ignore the selectize input

        $('div.selectize-control > div.selectize-input > input').each(function(index){
            this.removeAttribute("autocomplete");
            this.setAttribute('data-lpignore', 'true')
        });

[KrunchMuffin]

This doesn't seem to do the trick in the current Chrome browser. Does anyone have other solutions? Such a PITA

[lacymorrow]

NOOO, Regressions!

[eduardo-mior]

On my GitHub profile I wrote an article about this Autocomplete issue. It's a boring thing. There are several ways to fix this problem, the best way is to generate a random string to put in the autocomplete property every time the Input is rendered. This is the only way to guarantee that the autocomplete will never appear, generating a random string every time the page is loaded.

Example: autocomplete="af2f90"

My article: https://gist.github.com/eduardo-mior/ad14cab17fb5ab641812bff622534353

@KrunchMuffin

All other solutions, like for example autocomplete="new-password" or autocomplete="none" or autocomplete="nonono" will fail after a few dozen accesses. Google Chrome understands that that field has already been filled in several times and starts making suggestions. If we use an always random autocomplete, it will never find a cache for that field because the autocomplete is never the same.

[risadams]

@eduardo-mior the writeup you did is fantastic! thank you for the research that you have put in.
I am re-opening this ticket and will schedule a fix for our next version release.

[KrunchMuffin]

It is a good write up, but we should test all the untested ones.

[github-actions]

This issue is stale because it has been open 90 days with no activity. Remove stale label or comment or this will be closed in 5 days

[margenstepa]

This inside selectize fixed it for me:
onInitialize: function() {
var controlInput = this.$control_input;
controlInput.attr('autocomplete', 'nope');
controlInput.on('focus', function() {
$(this).attr('name', Math.random().toString(36).substring(7));
});
},