Special keys (ESC, Enter, ...) for Chinese input methods interfere with UI

[yan12125]

Steps to reproduce

1. Use a Chinese input method (ex: fcitx5-chewing in my case)
2. Type some Chinese characters in the text area Add a task to "My Calendar"…
3. Hit Enter

Expected behavior

Currently typed characters are commited when I hit Enter. At this time Nextcloud sees newly typed characters, while the new task should not be created yet, as the Enter key is for the input method, not for the application (the browser running Nextcloud in this case). The new task is created only when I hit Enter for the second time.

See "Additional info" below for how Chinese input methods work.

Actual behaviour

When Enter is hit for the first time, the new task is created.

Tasks app version

0.16.0

CalDAV-clients used

DAVx5

Browser

Firefox 125.0.3

Client operating system

Either Arch Linux or Windows 10

Server operating system

Arch Linux

Web server

Nginx

Database engine version

PostgreSQL

PHP engine version

PHP 8.2

Nextcloud version

28.0.4

Updated from an older installed version or fresh install

Updated from an older version

List of activated apps

Enabled:
  - activity: 2.20.0
  - admin_audit: 1.18.0
  - calendar: 4.6.7
  - cloud_federation_api: 1.11.0
  - contacts: 5.5.3
  - dav: 1.29.1
  - federatedfilesharing: 1.18.0
  - files: 2.0.0
  - files_reminders: 1.1.0
  - lookup_server_connector: 1.16.0
  - oauth2: 1.16.3
  - provisioning_api: 1.18.0
  - settings: 1.10.1
  - tasks: 0.16.0
  - theming: 2.3.0
  - twofactor_backupcodes: 1.17.0
  - viewer: 2.2.0
  - workflowengine: 2.10.0
Disabled:
  - bruteforcesettings: 2.8.0
  - circles: 28.0.0 (installed 22.0.0-beta.1)
  - comments: 1.18.0 (installed 1.3.0)
  - contactsinteraction: 1.9.0 (installed 1.1.0)
  - dashboard: 7.8.0 (installed 7.0.0)
  - encryption: 2.16.0
  - federation: 1.18.0 (installed 1.3.0)
  - files_external: 1.20.0 (installed 1.3.0)
  - files_pdfviewer: 2.9.0 (installed 1.4.0)
  - files_sharing: 1.20.0 (installed 1.8.0)
  - files_trashbin: 1.18.0 (installed 1.7.0)
  - files_versions: 1.21.0 (installed 1.10.0)
  - firstrunwizard: 2.17.0 (installed 2.4.0)
  - logreader: 2.13.0 (installed 2.7.0)
  - nextcloud_announcements: 1.17.0 (installed 1.4.0)
  - notifications: 2.16.0 (installed 2.3.0)
  - password_policy: 1.18.0 (installed 1.5.0)
  - photos: 2.4.0 (installed 1.0.0)
  - privacy: 1.12.0 (installed 1.4.0)
  - recommendations: 2.0.0 (installed 0.8.0)
  - related_resources: 1.3.0 (installed 1.0.0)
  - serverinfo: 1.18.0 (installed 1.10.0)
  - sharebymail: 1.18.0 (installed 1.5.0)
  - support: 1.11.1 (installed 1.1.0)
  - survey_client: 1.16.0 (installed 1.3.0)
  - suspicious_login: 6.0.0
  - systemtags: 1.18.0 (installed 1.3.0)
  - text: 3.9.1 (installed 1.2.3)
  - twofactor_totp: 10.0.0-beta.2 (installed 10.0.0-beta.2)
  - updatenotification: 1.18.0 (installed 1.8.0)
  - user_ldap: 1.19.0
  - user_status: 1.8.1 (installed 1.0.0)
  - weather_status: 1.8.0 (installed 1.0.0)

Nextcloud configuration

{
    "system": {
        "version": "28.0.4.1",
        "installed": true,
        "instanceid": "***REMOVED SENSITIVE VALUE***",
        "passwordsalt": "***REMOVED SENSITIVE VALUE***",
        "secret": "***REMOVED SENSITIVE VALUE***",
        "trusted_domains": [
            "***REMOVED SENSITIVE VALUE***"
        ],
        "datadirectory": "***REMOVED SENSITIVE VALUE***",
        "dbtype": "pgsql",
        "defaultapp": "calendar",
        "appstoreenabled": false,
        "log_type": "syslog",
        "config_is_read_only": true,
        "maintenance": false,
        "overwrite.cli.url": "***REMOVED SENSITIVE VALUE***",
        "dbname": "***REMOVED SENSITIVE VALUE***",
        "dbhost": "***REMOVED SENSITIVE VALUE***",
        "dbuser": "***REMOVED SENSITIVE VALUE***",
        "loglevel": 1,
        "logfile": "",
        "syslog_tag": "Nextcloud",
        "apps_paths": [
            {
                "path": "\/usr\/share\/webapps\/nextcloud\/apps",
                "url": "\/apps",
                "writable": false
            },
            {
                "path": "\/var\/lib\/nextcloud\/apps",
                "url": "\/wapps",
                "writable": true
            }
        ]
    }
}

Web server error log

Nothing when the issue happens

Log file

Nothing when the issue happens

Browser log

Nothing when the issue happens

Additional info

Backgrounds about Chinese input methods

In some Chinese input methods, there is a concept called "pre-editing". When some characters are typed, they are placed in a preedit buffer (often decorated with an underline or a dashed underline) until Enter is hit, so that users can modify typed characters. When Enter is hit, characters in the preedit buffer are "committed" and finalized. On the other hand, if ESC is hit before characters are commited, they are discarded. There is a video showing how pre-editing works: https://www.youtube.com/watch?v=5eFTfC8i_gc&t=118s

The issue is reproducible with fcitx5-chewing / Firefox / Arch Linux as well as PIME / Firefox / Windows.

Possible fix

diff --git a/src/components/HeaderBar.vue b/src/components/HeaderBar.vue
index 7fb4a2f2..5cda6333 100644
--- a/src/components/HeaderBar.vue
+++ b/src/components/HeaderBar.vue
@@ -32,8 +32,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($event)"
+				@compositionend="compositionend($event)"
+				@keydown.esc="clearNewTask($event)"
+				@keydown.enter="addTask"
 				@paste.stop="addMultipleTasks">
 				<template #icon>
 					<Plus :size="20" />
@@ -82,6 +84,7 @@ export default {
 			showCreateMultipleTasksModal: false,
 			multipleTasks: { numberOfTasks: 0, tasks: {} },
 			additionalTaskProperties: {},
+			compositing: false,
 		}
 	},
 	computed: {
@@ -111,12 +114,31 @@ export default {
 			'createTask',
 		]),
 
+		compositionstart($event) {
+			this.compositing = true;
+			console.log(`compositionstart: this.compositing = ${this.compositing}`);
+		},
+		compositionend($event) {
+			this.compositing = false;
+			console.log(`compositionend: this.compositing = ${this.compositing}`);
+		},
+
 		clearNewTask(event) {
+			console.log(`clearNewTask: this.compositing = ${this.compositing}`);
+			if (this.compositing) {
+				return;
+			}
+
 			event.target.blur()
 			this.newTaskName = ''
 		},
 
 		async addTask() {
+			console.log(`addTask: this.compositing = ${this.compositing}`);
+			if (this.compositing) {
+				return;
+			}
+
 			const data = {
 				summary: this.newTaskName,
 				// If the task is created in the calendar view,

Browsers send events compositionstart and compositionend when an input method starts/ends a composition session (where users type and optionally modify characters in the pre-editing buffer), respectively. If I skip key events when a composition session is running, special keys like Enter and ESC will only be handled by the input method, not by Nextcloud. Note that I changed keyup to keydown, as when the keyup event is fired, the key is already processed by the input method, and thus the key will be processed again by Nextcloud, which is not desired.

Some frontend frameworks handle composition events automatically. For example, the input method works as expected in Syncthing, which seems using Angular 1.x, where compositionstart/compositionend events are handled internally and events are skipped during a composition session. On the other hand, Vue.js also records composition sessions. However, apparently only the text changing events are skipped.