カーソルキー（↑ or ↓）押下でフォーカスを移動させたいがその際にスクロールを抑制したい

カーソルキーでフォーカスを移動させたい。Tabキー押下でできるやつ。けど調べた感じ気合でDOMとってきてそいつにfocus()するしかないっぽい。仕方ないのでrefでつなげてfocus()した。

で、そのフォーカスを移動させたい要素がoverflow: scroll内の要素なので、カーソルキーを押下するとブラウザ側の挙動でスクロールしちゃう。フォーカス移動で勝手に見える範囲には来てくれるし、フォーカス移動しながらスクロールもすると見た目ちょっと変だったのでスクロール止めたい。

toburau.hatenablog.jp

で、結論 event.preventDefault()で止めれるみたいだった。なのでeventのkeyだけ見てからpreventDefaultしてる。けどkey判断した時点でスクロール走らないのかは謎。その短い時間じゃしないのかな。以下みたいにしました。

    // ↑押下
    if (event.key === 'ArrowUp') {
      event.preventDefault() // NOTE: スクロールしないように
      focusOnPrev()
    }
    // ↓押下
    if (event.key === 'ArrowDown') {
      event.preventDefault() // NOTE: スクロールしないように
      focusOnNext()
    }