Prevent comments from submitting after input as composition ends

app/javascript/retrospring/features/answerbox/comment/index.ts

@@ -1,7 +1,7 @@
 import registerEvents from "retrospring/utilities/registerEvents"
 import { commentCharacterCountHandler } from "./count";
 import { commentDestroyHandler } from "./destroy";
-import { commentCreateHandler } from "./new";
+import {commentComposeEnd, commentComposeStart, commentCreateHandler} from "./new";
 import { commentReportHandler } from "./report";
 import { commentSmileHandler } from "./smile";
 import { commentToggleHandler } from "./toggle";
@@ -12,6 +12,8 @@ export default (): void => {
     { type: 'click', target: '[name=ab-smile-comment]', handler: commentSmileHandler, global: true },
     { type: 'click', target: '[data-action=ab-comment-report]', handler: commentReportHandler, global: true },
     { type: 'click', target: '[data-action=ab-comment-destroy]', handler: commentDestroyHandler, global: true },
+    { type: 'compositionstart', target: '[name=ab-comment-new]', handler: commentComposeStart, global: true },
+    { type: 'compositionend', target: '[name=ab-comment-new]', handler: commentComposeEnd, global: true },
     { type: 'keyup', target: '[name=ab-comment-new]', handler: commentCreateHandler, global: true },
     { type: 'input', target: '[name=ab-comment-new]', handler: commentCharacterCountHandler, global: true }
   ]);

app/javascript/retrospring/features/answerbox/comment/new.ts

@@ -3,7 +3,14 @@ import { post } from '@rails/request.js';
 import I18n from 'retrospring/i18n';
 import { showNotification, showErrorNotification } from 'utilities/notifications';
 
+let compositionJustEnded = false;
+
 export function commentCreateHandler(event: KeyboardEvent): boolean {
+  if (compositionJustEnded && event.which == 13) {
+    compositionJustEnded = false;
+    return;
+  }
+
   const input = event.target as HTMLInputElement;
   const id = input.dataset.aId;
   const counter = document.querySelector(`#ab-comment-charcount-${id}`);
@@ -51,3 +58,13 @@ export function commentCreateHandler(event: KeyboardEvent): boolean {
       });
   }
 }
+
+export function commentComposeStart(): boolean {
+  compositionJustEnded = false;
+  return true;
+}
+
+export function commentComposeEnd(): boolean {
+  compositionJustEnded = true;
+  return true;
+}