Next.js(React)でrouter.push時にキーボードをjsで閉じる方法

検索フォームなどのinputで値を入力しEnterを押した後、router.push()を使って、ブラウザの画面遷移ではなくSPA?として画面を切り替える場合にキーボードが閉じなかった。

これはブラウザの全リロードをさせないためにevent.preventDefault()をしているゆえの挙動であり、その前にevent.target[0].blur()でtargetとなったinputのフォーカスを外してあげると閉じてくれる。

  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
    event.target[0].blur();
    event.preventDefault();
    
    router.push({
      pathname: '/search',
      query: { q: newQuery },
    });
  };

ちなみにeventの型はonSubmitとonChangeなどで微妙に違うのでそこも注意されたし。

https://qiita.com/Takepepe/items/f1ba99a7ca7e66290f24

またevent.currentTargetは値がnullであり当然これにblur()`をしても何も変わらなかった。