FIX: use autocomplete="discourse" to disable Chrome address autofill

FIX: use autocomplete=“discourse” to disable Chrome address autocomplete

https://stackoverflow.com/a/47822599/17174

Chrome 63 and up start ignoring autocomplete="off"

Per: 468153 - autocomplete=off is ignored on non-login INPUT elements - chromium - Monorail

The tricky part here is that somewhere along the journey of the web autocomplete=off become a default for many form fields, without any real thought being given as to whether or not that was good for users. This doesn’t mean there aren’t very valid cases where you don’t want the browser autofilling data (e.g. on CRM systems), but by and large, we see those as the minority cases. And as a result, we started ignoring autocomplete=off for Chrome Autofill data

So to work around this decision we now explicitly say: autocomplete=“discourse” when we don’t want Chrome to randomly fill in addressed (aka. always)

diff --git a/app/assets/javascripts/discourse/templates/components/composer-title.hbs b/app/assets/javascripts/discourse/templates/components/composer-title.hbs
index 63d81f8..76f63da 100644
--- a/app/assets/javascripts/discourse/templates/components/composer-title.hbs
+++ b/app/assets/javascripts/discourse/templates/components/composer-title.hbs
@@ -4,6 +4,6 @@
              maxLength=titleMaxLength
              placeholderKey=composer.titlePlaceholder
              disabled=composer.loading
-             autocomplete="off"}}
+             autocomplete="discourse"}}
 
 {{popup-input-tip validation=validation}}
diff --git a/app/assets/javascripts/discourse/templates/components/composer-user-selector.hbs b/app/assets/javascripts/discourse/templates/components/composer-user-selector.hbs
index 62473a5..7ee33ef 100644
--- a/app/assets/javascripts/discourse/templates/components/composer-user-selector.hbs
+++ b/app/assets/javascripts/discourse/templates/components/composer-user-selector.hbs
@@ -7,7 +7,7 @@
                   tabindex="1"
                   usernames=usernames
                   hasGroups=hasGroups
-                  autocomplete="off"}}
+                  autocomplete="discourse"}}
 {{else}}
   <div class='ac-wrap composer-user-selector-limited' {{action "toggleSelector"}}>
     <span>{{limitedUsernames}}</span>
diff --git a/app/assets/javascripts/discourse/templates/components/d-editor.hbs b/app/assets/javascripts/discourse/templates/components/d-editor.hbs
index 41694e0..b0aec1e 100644
--- a/app/assets/javascripts/discourse/templates/components/d-editor.hbs
+++ b/app/assets/javascripts/discourse/templates/components/d-editor.hbs
@@ -39,7 +39,7 @@
     </div>
 
     {{conditional-loading-spinner condition=loading}}
-    {{textarea autocomplete="off" tabindex=tabindex value=value class="d-editor-input" placeholder=placeholderTranslated disabled=disabled}}
+    {{textarea autocomplete="discourse" tabindex=tabindex value=value class="d-editor-input" placeholder=placeholderTranslated disabled=disabled}}
     {{popup-input-tip validation=validation}}
     {{plugin-outlet name="after-d-editor" tagName="" args=outletArgs}}
   </div>
diff --git a/app/assets/javascripts/discourse/templates/emoji-picker.raw.hbs.erb b/app/assets/javascripts/discourse/templates/emoji-picker.raw.hbs.erb
index 40c1470..dd04f14 100644
--- a/app/assets/javascripts/discourse/templates/emoji-picker.raw.hbs.erb
+++ b/app/assets/javascripts/discourse/templates/emoji-picker.raw.hbs.erb
@@ -19,7 +19,7 @@
 <div class='main-column'>
   <div class='filter'>
     {{d-icon 'search'}}
-    <input type='text' name="filter" placeholder="{{i18n 'emoji_picker.filter_placeholder'}}" autocomplete="off"/>
+    <input type='text' name="filter" placeholder="{{i18n 'emoji_picker.filter_placeholder'}}" autocomplete="discourse"/>
     <button class='clear-filter'>
       {{d-icon 'times'}}
     </button>
diff --git a/app/assets/javascripts/discourse/templates/invites/show.hbs b/app/assets/javascripts/discourse/templates/invites/show.hbs
index e887723..6b3b461 100644
--- a/app/assets/javascripts/discourse/templates/invites/show.hbs
+++ b/app/assets/javascripts/discourse/templates/invites/show.hbs
@@ -24,7 +24,7 @@
         <form>
           <div class="input username-input">
             <label>{{i18n 'user.username.title'}}</label>
-            {{input value=accountUsername id="new-account-username" name="username" maxlength=maxUsernameLength autocomplete="off"}}
+            {{input value=accountUsername id="new-account-username" name="username" maxlength=maxUsernameLength autocomplete="discourse"}}
             &nbsp;{{input-tip validation=usernameValidation id="username-validation"}}
             <div class="instructions">{{i18n 'user.username.instructions'}}</div>
           </div>
diff --git a/app/assets/javascripts/discourse/templates/modal/change-owner.hbs b/app/assets/javascripts/discourse/templates/modal/change-owner.hbs
index 62b55d4..ecec331 100644
--- a/app/assets/javascripts/discourse/templates/modal/change-owner.hbs
+++ b/app/assets/javascripts/discourse/templates/modal/change-owner.hbs
@@ -6,7 +6,7 @@
     {{user-selector single="true"
                     usernames=new_user
                     placeholderKey="topic.change_owner.placeholder"
-                    autocomplete="off"}}
+                    autocomplete="discourse"}}
   </form>
 {{/d-modal-body}}
 
diff --git a/app/assets/javascripts/discourse/templates/modal/create-account.hbs b/app/assets/javascripts/discourse/templates/modal/create-account.hbs
index 7b084f3..29daa50 100644
--- a/app/assets/javascripts/discourse/templates/modal/create-account.hbs
+++ b/app/assets/javascripts/discourse/templates/modal/create-account.hbs
@@ -28,7 +28,7 @@
             <tr class="input">
                   <td class="label"><label for='new-account-username'>{{i18n 'user.username.title'}}</label></td>
                   <td>
-                  {{input value=accountUsername id="new-account-username" name="username" maxlength=maxUsernameLength autocomplete="off"}}
+                  {{input value=accountUsername id="new-account-username" name="username" maxlength=maxUsernameLength autocomplete="discourse"}}
                   </td>
             </tr>
             <tr class="instructions">
diff --git a/app/assets/javascripts/discourse/templates/modal/invite.hbs b/app/assets/javascripts/discourse/templates/modal/invite.hbs
index 40deca7..d8f4466 100644
--- a/app/assets/javascripts/discourse/templates/modal/invite.hbs
+++ b/app/assets/javascripts/discourse/templates/modal/invite.hbs
@@ -22,7 +22,7 @@
           hasGroups=hasGroups
           usernames=emailOrUsername
           placeholderKey=placeholderKey
-          autocomplete="off"}}
+          autocomplete="discourse"}}
     {{else}}
       {{text-field value=emailOrUsername placeholderKey="topic.invite_reply.email_placeholder"}}
     {{/if}}

GitHub sha: 918a0ea3

1 Like

This commit has been mentioned on Discourse Meta. There might be relevant details there:

fyi @hnb-ku / @awesomerobot

3 Likes

UX: workaround chrome autocomplete bug in search

UX: bypass chrome autocomplete when editing admin text fields