はじめに

みなさん、こんにちは torihaziです

今日はタイトルのことをやっていきます。

この前実務でtextareaのformを実装していたところ

enterでsubmit、shift + enterで改行するような処理はできたのですが、

日本語入力するときに確定する時の"enter"もなぜか合わせてsubmitのenterとして処理されてしまってました。

今日はその改善方法を知るまで少しかかったので書き残しておこうかと思います

どういうことか

こういう時です。英字入力だとすぐに確定されるのですが、全角入力だとスペース押したりして変換できますよね。

解決方法

  const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
    if (e.key === "Enter" && !e.shiftKey && !e.nativeEvent.isComposing) {
      e.preventDefault();
      // フォーム送信の関数(ここではreact-hook-formのhandleSubmitを使用)
      form.handleSubmit(onSubmit, onInvalid)();
    }
  };

このe.nativeEvent.isComposingというものを追加して、textareaのonKeyDownにセットしてください

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

これは変換中の時はtrueになり、変換終了した場合はfalseになります。