Chrome のパスワードマネージャの username は、 <input type="password"> の 直前に入力された値が設定される

注: この記事に解決方法はありません

現象

システム上のユーザ名(emailとする)とパスワードの間に別の入力項目がある場合

<form action="/sign_up">
  <input type="text" name="email" autocomplete="username">
  <input type="text" name="nickname">
  <input type="password" name="password" autocomplete="new-password">
  <button type="submit">sign up</button>
</form>

メアドのみ先に送るようなユーザ登録フローでありがちな、 email が readonly だったりする場合

<form action="/sign_up">
  <input type="text" name="nickname">
  <input type="text" name="email" autocomplete="username" readonly>
  <input type="password" name="password" autocomplete="new-password">
  <button type="submit">sign up</button>
</form>

以上のようなフォームを送信した時、 Google Chrome 71 のパスワードマネージャは nickname を ID として保存する。どうやら type=password の直前の入力をユーザ名として認識する様子。 autocomplete="username" なんのためにあるんだろう…

Google chrome autofilling all password inputs - Stack Overflow

Chrome auto fills any input with a type of password and then whatever the input before it is

Stack Overflow に同じ悩みの人を発見。 blur と focus を使って無理矢理 autocomplete 自体を動かないようにしてる

Password Form Styles that Chromium Understands - The Chromium Projects

If you've implemented an "email first" sign-in flow that separates the username and password into two separate forms, include a form field containing the username in the form used to collect the password. You can, of course, hide this field via CSS if that's appropriate for your layout.

Chromium の推奨(?)のサインアップフォームの作り方には、 隠しフィールドとして autocomplete="username" を追加せよと書かれているが、この通りにしても上記のようなフォームの username は認識されない。

その他の参考文献

• Manage saved passwords - Google Chrome Help
  • パスワードマネージャの登録項目が間違ってたら手で直せとのこと
• <input type=password> - MDN
• HTML の autocomplete 属性 - MDN

進捗があったら追記する