Reactでautofocus属性が使えないときの対処法

dialogを表示するときにどこにフォーカスを当てるかを指定するためにautofocus属性を使う。ただ、ReactではautoFocus: booleanというインターフェースを持ちながら、なぜか属性が削除されてしまうというバグ？仕様？がある。

環境

• React 18.x

対処法

autofocus="true"と指定することでautofocus属性が削除されなくなる。

<dialog>
  ...
  <button>セカンダリ</button>
  <button autofocus="true">プライマリ</button>
</dialog>

Issueやブログを読んでみるとref.current.focus()をすればいいという情報も多いが、そもそも全主要ブラウザがサポートしている機能に対してハックが必要なのはナンセンスだと感じる。

動作しないパターン

<button autoFocus>xxx</button>
<button autoFocus="true1">xxx</button>
// `autoFocus={true}`が本来の使い方のはず
<button autoFocus={true}>xxx</button>

<button autofocus>xxx</button>
<button autofocus={true}>xxx</button>

参考

• Bug: autoFocus broken inside <dialog /> · Issue #23301 · facebook/react
  • 2022年2月に報告されたIssueだが、まだ解決されていない模様