Autofill can cause both password field value and password field label to appear concurrently. [#903122]

To reproduce this issue:

Log in to the site and let Firefox save your username and password (for ONE user only)
Log out of the site and return to the login form. Note that this is pre-filled with both username and password.
Clear out the password field
Set focus to the username field
Remove focus from the username field

Firefox has now restored the pre-filled password, but Compact Forms has also displayed the label. I know this is one of those edge cases but I have attached a really easy patch for this as described in http://drupal.org/node/461918#comment-2286342

Comment	File	Size	Author
#3	compact_forms-DRUPAL-6--1.ff-autocomplete.3.patch	1.55 KB	sun
#2	compact_forms_firefox_autofill2.patch	1.16 KB	mstrelan
	compact_forms_firefox_autofill.patch	1.03 KB	mstrelan
	compact-forms-firefox.png	4.45 KB	mstrelan

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

Comment #1

sun

German

Karlsruhe

CreditAttribution: sun commented 6 September 2010 at 00:20

Status:

Needs review

» Needs work

Thanks!

+++ compact_forms.js	5 Sep 2010 23:48:29 -0000
@@ -21,8 +21,10 @@ $.fn.compactForm = function (stars) {
+      // Store initial value in case the browser auto-filled it
+      var $initial_value = $field.val();

2 minor style issues:

- Missing period.

- Only variables containing jQuery objects should have a leading $

+++ compact_forms.js	5 Sep 2010 23:48:29 -0000
@@ -39,7 +41,7 @@ $.fn.compactForm = function (stars) {
       $field.focus(function () {
-        if ($field.val() === '') {
+        if ($field.val() === $initial_value || $field.val() === '') {

We want to document the actual browser quirk here

Powered by Dreditor.

Comment #2

mstrelan CreditAttribution: mstrelan commented 6 September 2010 at 00:26

Status:

Needs work

» Needs review

File	Size
compact_forms_firefox_autofill2.patch	1.16 KB

Great, I had never realised why variables had $ signs in this file. Re-roll attached

Comment #3

sun

German

Karlsruhe

CreditAttribution: sun commented 9 January 2011 at 05:51

Status:

Needs review

» Fixed

File	Size
compact_forms-DRUPAL-6--1.ff-autocomplete.3.patch	1.55 KB

Thanks for reporting, reviewing, and testing! Committed attached patch to all branches.

A new development snapshot will be available within the next 12 hours. This improvement will be available in the next official release.

Comment #4

23 January 2011 at 06:00

Status:

Fixed

» Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.

Comment #5

aristeides CreditAttribution: aristeides commented 16 March 2011 at 15:42

I know this is marked as "fixed", but I'm having this issue with the latest dev version of this on D6...
actually not only on firefox abut all browsers.
On the password field when a user clicks to enter his/her password, the "password" title fades out instantly and then reappears...

Comment #6

klonos

he/him

English

90% Melbourne, Australia - 10% Larissa, Greece

CreditAttribution: klonos commented 23 July 2011 at 15:47

Title:	Firefox autofill can cause both field values and field labels to appear concurrently	» Autofill can cause both password field value and password field label to appear concurrently.
Status:	Closed (fixed)	» Active

Yep, been getting it too in latest 7.x-dev in firefox (haven't tested yet other browsers, but I will and then report back).

Comment #7

mstrelan CreditAttribution: mstrelan commented 19 August 2011 at 00:24

This is fixed for me in FF6, but still present in Chrome 14.

Comment #8

klonos

he/him

English

90% Melbourne, Australia - 10% Larissa, Greece

CreditAttribution: klonos commented 19 August 2011 at 00:53

Issue tags:

+browser issue

I also confirm this is fixed in latest fx 8.0a1 x64 (it must have been something committed in the August 15th build or the one before it I guess).

Still there in IE9 (both x86 & x64) - at least on Win7 x64.

Comment #9

mstrelan CreditAttribution: mstrelan commented 12 September 2011 at 05:02

      $field.focus(function () {
        // Some browsers (e.g., Firefox) are automatically inserting a stored
        // username and password into login forms. In case the password field is
        // manually emptied afterwards, and the user jumps back to the username
        // field (without changing it), and forth to the password field, then
        // the browser automatically re-inserts the password again. Therefore,
        // we also need to test against the initial field value.
        if ($field.val() === initial_value || $field.val() === '') {
          $label.fadeOut('fast');
        }
      });

This part doesn't really make sense. Essentially it says "if the value of the field is empty, or the value is at its original state, hide the label". Wouldn't it make more sense to say "if the label is visible, hide the label".

New code

      $field.focus(function () {
        if ($label.is(':visible')) {
          // Field is empty, we can afford to fade out the label.
          if ($field.val() === '') {
            $label.fadeOut('fast');
          }
          // Field has a value, hide the label immediately to ensure field and label aren't shown concurrently.
          else {
            $label.css('display', 'none');
          }
        }
      });

This doesn't solve the problem of one field (eg username) triggering a value in another field (eg password), and the user not focussing immediately on the field whose value was updated (eg password). This is another issue - #903140: Provide workaround for Firefox not triggering the onchange event when prefill occurs

Comment #10

kvoltz CreditAttribution: kvoltz commented 11 January 2013 at 06:44

Im still seeing this in the latest 7.x version. has anyone had any luck here?

Comment #11

jamesdixon CreditAttribution: jamesdixon commented 5 May 2013 at 04:03

For those of you with this issue in Chrome, you can add a fix into compact_forms.js:

/**
 * Attach compact forms behavior to all enabled forms upon page load.
 */
Drupal.behaviors.compactForms = function (context) {
  if (!Drupal.settings || !Drupal.settings.compactForms) {
    return;
  }
  $('#' + Drupal.settings.compactForms.forms.join(',#'), context).compactForm(Drupal.settings.compactForms.stars, Drupal.settings.compactFor>

  // Safari adds passwords without triggering any event after page load.
  // We therefore need to wait a bit and then check for field values.
  if ($.browser.safari) {
    setTimeout(Drupal.compactForms.fixSafari, 200);
  }
+  $.browser.chrome = /chrome/.test(navigator.userAgent.toLowerCase());
+  if ($.browser.chrome) {
+    setTimeout(Drupal.compactForms.fixChrome, 200);
+  }
};

+Drupal.compactForms.fixChrome = function () {
+  $('label.compact-form-label').each(function () {
+    var $label = $(this);
+    var context = this.form;
+    if ($('#' + $label.attr('for'), context).val() != '') {
+      $label.css('display', 'none');
+    }
+  });
}

Comment #12

FiNeX CreditAttribution: FiNeX commented 2 March 2014 at 18:15

Issue summary:

View changes

The fix suggested by @jamesdixon works fine on Chrome. Would be possible to commit the patch?

Comment #13

millionleaves CreditAttribution: millionleaves as a volunteer and commented 4 July 2016 at 03:32

Coming late to this discussion.

I have used Compact Forms on a number of sites with no issues. On my latest site, however, I am using another module that injects JS into the page (Backstretch). This module breaks with the latest -dev version of Compact Forms when using Chrome.

Looking at the code, it appears that this patch is included, and the Safari check in the code is what's breaking Backstretch. Commenting the following lines in compact_forms.js fixes the issue:

if ($.browser.safari) {
    setTimeout(Drupal.compactForms.fixSafari, 200);
}

Reading around the subject suggests that $.browser is deprecated.

Comment #14

apaderno

he/him

Italian

Brescia, 🇮🇹 🇪🇺

CreditAttribution: apaderno commented 6 March 2023 at 13:49

Status:	Active	» Closed (outdated)
Issue tags:	-browser issue

I am closing this issue, since it is for a Drupal version that now is not supported.
Please re-open it if the issue is also relevant for other project branches that require a supported Drupal version.