JavaScript ボタンクリック時に他のボタンにフォーカスを設定できない

Question

実現したいこと

ボタンクリック時に他のボタンにフォーカスを設定したい。

前提

昨日投稿した以下の質問について調査したところ、Vueを使用しなくても同様の現象が発生することがわかったので、別の質問として投稿します。
Vue3 Composition API のフォーカス制御

発生している問題・エラーメッセージ

ボタンクリック時に他のボタンにフォーカスを設定できない。

該当のソースコード

<p>
    <!-- focus1ボタンをクリックしてもtarget1ボタンにフォーカスが設定されない -->
    <button onclick="document.getElementById('target1').focus()">focus1</button>
    <input type="button" id="target1" value="target1">
</p>
<p>
    <!-- focus2ボタンをクリックするとtarget2テキストボックスにフォーカスが設定される -->
    <button onclick="document.getElementById('target2').focus()">focus2</button>
    <input type="text" id="target2" value="target2">
</p>

試したこと

Chrome と Edge で確認しました。

補足情報（FW/ツールのバージョンなど）

Windows 11
Chrome 114.0.5735.110
Edge 114.0.1823.41

Answer 1

focus1ボタンをクリックしたとき、target1ボタンにフォーカスは移動していると思います。フォーカスリングが出ていない(:focus-visibleではない)だけです。スペースキーなどを押すとtarget1が反応するのがわかると思います。

Chromiumのバグとして登録されているようです。
https://bugs.chromium.org/p/chromium/issues/detail?id=1317039

Comments

[gosaro]

回答ありがとうございます。
ご指摘のとおりフォーカスリングが表示されていないだけで、フォーカスは設定されていることを確認しました。
また、リンク先を拝見し、:focus-visibleについても調べてみました。
これはバグというよりは仕様（そうあるべくしてそのように実装している）のようですね。

Answer 2

とりあえず:focus擬似クラスでそれっぽくみせればよいでしょう

<style>
:focus {
  border-radius:3px;
  border: 1px solid gray;
  outline: 1px solid rgba(0,0,255,0.8);
}
</style>
<p>
<button onclick="target1.focus()">focus1</button>
<input type="button" id="target1" value="target1">
</p>
<p>
<button onclick="target2.focus()">focus2</button>
<input type="text" id="target2" value="target2">
</p>