Prevent Safari autofilling "username" and "password" fields in Editor (modal)

bsuk

Does anyone know of a simple way of doing this?
If not, I'm guessing that if I create hidden fields with the names "username" and "password" might do it, but I wanted to check that there's no easier/more efficient workaround to disable this behaviour first..
Many thanks in advance.

BSUK

allan

Hi,

You can add the autocomplete parameter to the inputs using the attr option of the text input option (and likewise password if you are using that):

{
  name: "username",
  label: "User name:",
  attr: {
    autocomplete: "off"
  }
}

That should do it.

Allan

bsuk

Thanks Allan, but that doesn't seem to work.
I think Safari is ignoring the autocomplete setting for some reason..

BSUK

allan

I remember reading about Chrome ignoring autocomplete=off and I just dug this up: https://bugs.chromium.org/p/chromium/issues/detail?id=468153#c164 .

In cases where you really want to disable autofill, our suggestion at this point is to utilize the autocomplete attribute to give valid, semantic meaning to your fields. If we encounter an autocomplete attribute that we don't recognize, we won't try and fill it.

So you could try:

{
  name: "username",
  label: "User name:",
  attr: {
    autocomplete: "blah-blah-blah"
  }
}

I've no idea if that will work on Safari though I'm afraid.

Allan

bsuk

Thanks, but it doesn't!
I'll investigate more and report back here when I find a suitable fix.

allan

Looks like this area of web-browsers is a complete mess. This SO post also highlights the problem.

This SO post is more detailed and interesting as well.

Perhaps try renaming your fields to something like a and b so Safari doesn't see keywords in it? You can do something like:

Field::inst( 'username', 'a' )

to alias username to a in the JSON and HTTP variable that Editor submits.

Allan

bsuk

Thanks Allan, interesting reading indeed.
However, when I try the alias method you mentioned, I get javascript JSON errors returned:

DataTables warning: table id=users - Requested unknown parameter 'FullName' for row 0, column 2. For more information about this error, please see http://datatables.net/tn/4

Maybe it's because I have validation also, and I'm formatting it incorrectly?
I couldn't find any documentation about field aliases.

Field::inst( 'UserName', 'a' )->validator( 'Validate::notEmpty' ) ->validator( 'Validate::unique', array( "message" => "$userinuse" ) ),

bsuk

After scouring SO, I found this solution to work for me in editor:

<div style="position:absolute;height:0px; overflow:hidden; ">
  Username <input type="text" name="fake_safari_username" >
  Password <input type="password" name="fake_safari_password">
</div>

I'm guessing Safari then autofills the hidden fake username and password fields..
Hacky, but works!

BSUK

allan

DataTables warning: table id=users - Requested unknown parameter 'FullName' for row 0, column 2. For more information about this error, please see http://datatables.net/tn/4

You need to update the client-side code to use the alias (i.e. a) since that is what it sees, rather than UserName.

I couldn't find any documentation about field aliases.

Its coming. Its actually written, but not yet published. It will be alongside 1.7.

Good to hear you've got a workaround.

Allan

bsuk

Awesome, thanks Allan!