tildes-community/tildes-reextended
tildes-community
/
tildes-reextended
1
Fork 0
Code

Clean up some autocomplete handling.

This commit is contained in:
Bauke 2023-12-14 13:11:02 +01:00
parent a2c258a627
commit 6af9af9583
Signed by: Bauke
GPG Key ID: C1C0F29952BCF558
1 changed files with 16 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
source/content-scripts/features/autocomplete.tsx
View File

@ -65,9 +65,10 @@ export class AutocompleteFeature extends Component<Props, State> {
} }
globalInputHandler = (event: CompositionEvent | KeyboardEvent) => { globalInputHandler = (event: CompositionEvent | KeyboardEvent) => {
const activeElement = document.activeElement as HTMLElement; const textarea = event.target;
// Only add the autocompletes to textareas. // Only add the autocompletes to textareas.
if (activeElement.tagName !== "TEXTAREA") { if (!(textarea instanceof HTMLTextAreaElement)) {
return; return;
} }
@ -80,13 +81,17 @@ export class AutocompleteFeature extends Component<Props, State> {
const dataAttribute = `data-trx-autocomplete-${target}`; const dataAttribute = `data-trx-autocomplete-${target}`;
const key = event instanceof KeyboardEvent ? event.key : event.data; const key = event instanceof KeyboardEvent ? event.key : event.data;
if (key === prefix && !activeElement.getAttribute(dataAttribute)) { if (key === prefix && !textarea.getAttribute(dataAttribute)) {
activeElement.setAttribute(dataAttribute, "true"); textarea.setAttribute(dataAttribute, "true");
activeElement.addEventListener("keyup", (event) => { textarea.addEventListener("keyup", (event) => {
this.textareaInputHandler(event, prefix, target, values); if (!(event.target instanceof HTMLTextAreaElement)) {
return;
}
this.textareaInputHandler(event.target, prefix, target, values);
}); });
this.textareaInputHandler(event, prefix, target, values); this.textareaInputHandler(textarea, prefix, target, values);
} }
}; };
@ -95,12 +100,11 @@ export class AutocompleteFeature extends Component<Props, State> {
}; };
textareaInputHandler = ( textareaInputHandler = (
event: CompositionEvent | KeyboardEvent, textarea: HTMLTextAreaElement,
prefix: string, prefix: string,
target: string, target: string,
values: Set<string>, values: Set<string>,
) => { ) => {
const textarea = event.target as HTMLTextAreaElement;
const text = textarea.value; const text = textarea.value;
// If the prefix isn't in the textarea, return early. // If the prefix isn't in the textarea, return early.
@ -129,7 +133,9 @@ export class AutocompleteFeature extends Component<Props, State> {
// Find all the values that match the input using `includes`. // Find all the values that match the input using `includes`.
const matches = new Set<string>( const matches = new Set<string>(
[...values].filter((value) => value.includes(input.toLowerCase())), [...values].filter((value) =>
value.toLowerCase().includes(input.toLowerCase()),
),
); );
// If there are no matches, return early. // If there are no matches, return early.