Save password prompt behavior inconsistent between browsers: Firefox, Chrome, Edge

Question

I have a simple html form that allows a signed-in user to update their password. Originally, the form did not contain a username field. Because it did not contain a username, when Firefox would prompt the user to save their new password, the prompt would have a blank username field:

To fix this, I added a username field like in the example code below, populated the value with the current signed-in username before rendering the page, and hid the input with css (.visually-hidden has display:none;). This had the desired effect on Firefox and it now populates the username in the 'save password' prompt.

After this change, however, Chrome and Edge no longer prompt to save the user's password. Before the change, Chrome and Edge had worked as desired, and even somehow populated the username field in the prompts. After the change, no prompt shows to offer to save the changed password.

Does anyone have any ideas for what I should do to get the save password behavior working consistently between Firefox, Chrome, and Edge? I've tried un-hiding the username input, adding/removing autocomplete attributes, removing the pre-populated username value from the input, making the input type="email", but nothing has worked so far on Chrome (I didn't verify each attempt on Edge).

Thank you.

    <form action="https://[example].com/password-confirm/" method="post" id="NewPasswordForm" name="NewPasswordForm" novalidate="novalidate">
  <fieldset>
    <input class="input-text visually-hidden" type="text" name="username" value="[email protected]" autocomplete="username email">

    <div class="form-row  required" aria-required="true">
      <label for="dwfrm_resetpassword_password"><span class="error-icon"></span><span>New Password</span><span class="required-indicator">*</span></label>
      <div class="field-wrapper">
        <input class="input-text password required" type="password" id="dwfrm_resetpassword_password" name="dwfrm_resetpassword_password" value="" placeholder="" maxlength="255" minlength="6" aria-required="true" aria-invalid="false">
      </div>
      <div class="form-caption "></div>
    </div>

    <div class="form-row  required" aria-required="true">
      <label for="dwfrm_resetpassword_passwordconfirm"><span class="error-icon"></span><span>Verify Password</span><span class="required-indicator">*</span></label>
      <div class="field-wrapper">
        <input class="input-text password required" type="password" id="dwfrm_resetpassword_passwordconfirm" name="dwfrm_resetpassword_passwordconfirm" value="" placeholder="" maxlength="255" minlength="6" aria-required="true">
      </div>
      <div class="form-caption "></div>
    </div>

    <div class="form-row-button">
      <button type="submit" class="apply" name="dwfrm_resetpassword_send" value="Apply">Update Password</button>
      <a class="cancel" href="https://[example].com/preferences-summary/">Cancel</a>
    </div>
  </fieldset>
</form>

Yu Zhou Yu Zhou · Accepted Answer · 2020-10-27T06:12:03

As you say it worked on Edge and Chrome before the change and worked on Firefox after the change, so I think you can apply the change for Firefox alone.

You can first detect if the browser is Firefox in JavaScript, if so then add the visually-hidden input. Then the input will only be added in Firefox and won't affect Edge/Chrome:

<fieldset>
    <div id="invisible"></div>
    ...
</fieldset>

<script>
    if (navigator.userAgent.toLowerCase().indexOf('firefox') > -1) {
        // Do Firefox-related activities
        document.getElementById('invisible').innerHTML = '<input class="input-text visually-hidden" type="text" name="username" value="[email protected]" autocomplete="username email">';
    }
</script>

Result in Firefox and Chrome:

Save password prompt behavior inconsistent between browsers: Firefox, Chrome, Edge

1 Answers