Screenshot

To reproduce this issue:

  1. Log in to the site and let Firefox save your username and password (for ONE user only)
  2. Log out of the site and return to the login form. Note that this is pre-filled with both username and password.
  3. Clear out the password field
  4. Set focus to the username field
  5. 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

CommentFileSizeAuthor
#3 compact_forms-DRUPAL-6--1.ff-autocomplete.3.patch1.55 KBsun
#2 compact_forms_firefox_autofill2.patch1.16 KBmstrelan
compact_forms_firefox_autofill.patch1.03 KBmstrelan
compact-forms-firefox.png4.45 KBmstrelan

Comments

sun’s picture

sun
Primary language German
Location Karlsruhe
commented
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.

mstrelan’s picture

mstrelan commented
Status: Needs work » Needs review
StatusFileSize
new compact_forms_firefox_autofill2.patch1.16 KB

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

sun’s picture

sun
Primary language German
Location Karlsruhe
commented
Status: Needs review » Fixed
StatusFileSize
new compact_forms-DRUPAL-6--1.ff-autocomplete.3.patch1.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.

Status: Fixed » Closed (fixed)

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

aristeides’s picture

aristeides commented

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...

klonos’s picture

klonos
he/him
Primary language English
Location 90% Melbourne, Australia - 10% Larissa, Greece
commented
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).

mstrelan’s picture

mstrelan commented

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

klonos’s picture

klonos
he/him
Primary language English
Location 90% Melbourne, Australia - 10% Larissa, Greece
commented
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.

mstrelan’s picture

mstrelan commented 
      $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

kvoltz’s picture

kvoltz commented

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

jamesdixon’s picture

jamesdixon commented

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');
+    }
+  });
}
finex’s picture

finex commented
Issue summary: View changes

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

millionleaves’s picture

millionleaves commented

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.

avpaderno’s picture

avpaderno
he/him
Primary language Italian
Location Brescia, 🇮🇹 🇪🇺
commented
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.