[React] inputにフォーカスしてる時にEnterキー押下で送信する

やりたいこと

inputで予測変換候補が出ていない時にEnterが押されたらsubmit関数叩きたい

isComposingを使用する

keydownのEventのプロパティにisComposingというものがある
変換開始（compositionstart）〜変換終了(compositionend）までの間、trueを返してくれる

ref: isComposing
ref: compositionstart
ref: compositionend

サッと試すなら下記のような感じ

document.getElementById("hoge").addEventListener("keydown",(e)=>{
  console.log(e.isComposing)
  // false
})

Reactで実際に使用する

const Hoge:React.FC = ():JSX.Element => {
  /** ボタン押下orEnterで呼ばれる */
  const handleSubmit = (
    e: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLInputElement>,
  ) => {
    console.log('Click')
  }
  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
    if (e.nativeEvent.isComposing || e.key !== 'Enter') return
    handleSubmit(e)
  }

  return(
    <div>
      <input onKeyDown={handleKeyDown} />
      <button onSubmit={handleSubmit}>submit</button>
    </div>
  )
}

ポイント💡

🙅‍♀️ event.isComposing エラー起こる
🙆‍♂️ event.nativeEvent.isComposing booleanが返ってくる

KeyboardEventの中にisComposingがないから「コントリュビュートチャンスか!?」と1分でパッチ書いてコントリビューター向けドキュメント1時間かけて読んでぷるり下書き作り終わってからnativeEventの存在に気づいた

愚かな理由でGWの貴重な1時間1分を無駄にしてしまった……