Handle special keys only when IME is not compositing

src/components/AppSidebar/NotesItem.vue

@@ -35,7 +35,9 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
 				<textarea ref="note__editor"
 					v-model="newValue"
 					:maxlength="100000"
-					@keyup.escape="setEditing(false)"
+					@compositionstart="compositionstart()"
+					@compositionend="compositionend()"
+					@keydown.escape="escKeyDown()"
 					@keydown.enter.ctrl.prevent="setValue()"
 					@change="setValue()" />
 			</div>
@@ -86,6 +88,7 @@ export default {
 			.use(Mitl)
 		return {
 			md,
+			compositing: false,
 		}
 	},
 	watch: {
@@ -129,6 +132,18 @@ export default {
 		setNotes($event) {
 			this.setEditing(true, $event)
 		},
+		// Inspired by https://gist.github.com/gotraveltoworld/ecbd2ddc6a0d9bcee8baf396d683e1ba
+		compositionstart() {
+			this.compositing = true
+		},
+		compositionend() {
+			this.compositing = false
+		},
+		escKeyDown() {
+			if (!this.compositing) {
+				this.setEditing(false)
+			}
+		},
 	},
 }
 </script>

src/components/HeaderBar.vue

@@ -33,8 +33,10 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
 				:show-trailing-button="newTaskName !== ''"
 				:trailing-button-label="placeholder"
 				@trailing-button-click="addTask"
-				@keyup.esc="clearNewTask($event)"
-				@keyup.enter="addTask"
+				@compositionstart="compositionstart()"
+				@compositionend="compositionend()"
+				@keydown.esc="clearNewTask($event)"
+				@keydown.enter="addTask"
 				@paste.stop="addMultipleTasks">
 				<template #icon>
 					<Plus :size="20" />
@@ -83,6 +85,7 @@ export default {
 			showCreateMultipleTasksModal: false,
 			multipleTasks: { numberOfTasks: 0, tasks: {} },
 			additionalTaskProperties: {},
+			compositing: false,
 		}
 	},
 	computed: {
@@ -112,12 +115,27 @@ export default {
 			'createTask',
 		]),
 
+		compositionstart() {
+			this.compositing = true
+		},
+		compositionend() {
+			this.compositing = false
+		},
+
 		clearNewTask(event) {
+			if (this.compositing) {
+				return
+			}
+
 			event.target.blur()
 			this.newTaskName = ''
 		},
 
 		async addTask() {
+			if (this.compositing) {
+				return
+			}
+
 			const data = {
 				summary: this.newTaskName,
 				// If the task is created in the calendar view,