マスターキー入力で、キーボード入力とパスワードマネージャー入力を両立させる

[kznrluk]

Problem / 問題点

<What / Where / Why>
ログイン画面、初回レンダリング時点でInput要素がType=Passwordになっていないため1Passwordのオートコンプリートが利用できなくなっている。目のアイコンを選択すると要素がType=Passwordになるものの、オートコンプリートは利用できない。

下記環境で確認:

• Firefox Developer Edition + 1Password
• Chrome + 1Password

下記では現状でも利用可能:

• iOS (一度非表示に切り替えるとキーボード経由でオートコンプリート利用可)

これは1Passwordが初回レンダリング時点のみInput要素の属性を見ているため発生している。
(DOMによる変更を検知しない)
https://developer.1password.com/docs/web/compatible-website-design/#improve-reliability

Solution (Optional)

下記 showSecret をデフォルト false にすると画像のようにオートコンプリートが効くようになる。
https://github.com/totegamma/concurrent-world/blob/develop/src/components/Importer/ImportMasterkey.tsx#L24

これは1Passwordのせいとも言えますが、デフォルト表示状態になにか意図があるのか、なければ false にしてもいいんじゃないかと思っています。

[totegamma]

+1です1password等が使えるようにしたい。

1つ問題なのが、type=passwordだとキーボードから日本語が入力できないんですよね。
なので、ベストな仕様としては

• デフォルトtype=password
• フォーカスしたら自動でtype=textに戻して日本語が入力できる状態にする
• 何かをペーストした場合はtype=passwordに戻してrevealされないようにする

といったところかなと思います！

[totegamma]

1passwordの場合現在進行形でtype=passwordになっている要素にしかinsertしてくれず、大変こまった