From 56b3a7da80d9fb88b889ac46e856700082b51803 Mon Sep 17 00:00:00 2001
From: Bauke <me@bauke.xyz>
Date: Mon, 14 Aug 2023 15:09:32 +0200
Subject: [PATCH] Make autocomplete also listen for compositionupdate events.

---
 source/content-scripts/features/autocomplete.tsx | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/source/content-scripts/features/autocomplete.tsx b/source/content-scripts/features/autocomplete.tsx
index 43ef76a..ba68cf3 100644
--- a/source/content-scripts/features/autocomplete.tsx
+++ b/source/content-scripts/features/autocomplete.tsx
@@ -56,6 +56,7 @@ export class AutocompleteFeature extends Component<Props, State> {
 
     // Add a keydown listener for the entire page.
     document.addEventListener("keydown", this.globalInputHandler);
+    document.addEventListener("compositionupdate", this.globalInputHandler);
 
     log(
       `Autocomplete: Initialized with ${this.state.groups.size} groups and ` +
@@ -63,7 +64,7 @@ export class AutocompleteFeature extends Component<Props, State> {
     );
   }
 
-  globalInputHandler = (event: KeyboardEvent) => {
+  globalInputHandler = (event: CompositionEvent | KeyboardEvent) => {
     const activeElement = document.activeElement as HTMLElement;
     // Only add the autocompletes to textareas.
     if (activeElement.tagName !== "TEXTAREA") {
@@ -78,7 +79,8 @@ export class AutocompleteFeature extends Component<Props, State> {
     ) => {
       const dataAttribute = `data-trx-autocomplete-${target}`;
 
-      if (event.key === prefix && !activeElement.getAttribute(dataAttribute)) {
+      const key = event instanceof KeyboardEvent ? event.key : event.data;
+      if (key === prefix && !activeElement.getAttribute(dataAttribute)) {
         activeElement.setAttribute(dataAttribute, "true");
         activeElement.addEventListener("keyup", (event) => {
           this.textareaInputHandler(event, prefix, target, values);
@@ -93,7 +95,7 @@ export class AutocompleteFeature extends Component<Props, State> {
   };
 
   textareaInputHandler = (
-    event: KeyboardEvent,
+    event: CompositionEvent | KeyboardEvent,
     prefix: string,
     target: string,
     values: Set<string>,