From 56b3a7da80d9fb88b889ac46e856700082b51803 Mon Sep 17 00:00:00 2001 From: Bauke 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 { // 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 { ); } - 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 { ) => { 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 { }; textareaInputHandler = ( - event: KeyboardEvent, + event: CompositionEvent | KeyboardEvent, prefix: string, target: string, values: Set,