20220315_issue-5409

対象 issue

https://github.com/weseek/growi/issues/5409 external_link

バグ内容

• 以下の画像のように メールアドレス欄に chrome に保存されたパスワードに紐づくユーザー名が自動入力されてしまう

バグの再現状態

• バグが再現する wiki
  • https://dev.growi.org/me
  • インナーwiki/me
• バグが再現しない wiki
  • localhost:3000/me
  • ngrok にてインターネットに公開したドメイン
    • https://fca0-217-178-32-41.jp.ngrok.io/me のようなドメイン

再現状態が断定できていないため、修正が行えない状態。

ドメインが再現条件に関係している可能性もある。

原因

• chrome 側の自動入力機能によって発生している
  • chrome の自動入力(auto fill)は、<input name="password">を見つけると、それをパスワード欄として1つ上の <input> タグにユーザー名を自動補完してしまう
• /me ページでは、パスワード設定タブが、ユーザー情報タブの時でもレンダリングされてしまっているためパスワードの1つ上の email の input が自動入力されてしまっている
  • (内部では dom の表示を display:none　として切り替えているため)

修正方法

迂回策

• LoginForm.jsx であれば、以下のように記述することで、chrome 自動入力を無効化できる

<input type="password" autoComplete="new-password" style={{ display: 'none' }} /> {/* ← inserted element */}
<input type="password" className="form-control rounded-0" data-testid="tiPasswordForLogin" placeholder="Password" name="loginForm[password]" />

• ↑を /me ページコンポーネントで該当する箇所に整えて入れる

参考: https://stackoverflow.com/questions/37503656/react-doesnt-render-autocomplete-off external_link

根本的な解決策

• コンポーネントをタブの切り替えによってマウントする形式にコンポーネントの設計を変更する（修正コストは迂回策より高い）