PonyMirrors/philomena
1
0
Fork 0
mirror of https://github.com/philomena-dev/philomena.git synced 2025-03-25 13:01:31 +01:00
Code Issues Projects Releases Packages Wiki Activity

Abort the server-side completions when the autocomplete popup needs to be hidden

Browse source
This commit is contained in:
MareStare 2025-03-19 00:58:16 +00:00
parent a3ab0d2b41
commit dd7ee44e36
1 changed files with 17 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
assets/js/autocomplete/index.ts
View file

@ -229,18 +229,23 @@ class Autocomplete {
// We use this method instead of the `focusout` event because this way it's // We use this method instead of the `focusout` event because this way it's
// easier to work in the developer tools when you want to inspect the element. // easier to work in the developer tools when you want to inspect the element.
// When you inspect it, a `focusout` happens. // When you inspect it, a `focusout` happens.
this.popup.hide(); this.hidePopup('The user clicked away');
this.input = null; this.input = null;
} }
} }
hidePopup(reason: string) {
this.serverSideTagSuggestions.abortLastSchedule(`[Autocomplete] Popup was hidden. ${reason}`);
this.popup.hide();
}
onKeyDown(event: KeyboardEvent) { onKeyDown(event: KeyboardEvent) {
if (!this.isActive() || this.input.element !== event.target) { if (!this.isActive() || this.input.element !== event.target) {
return; return;
} }
if ((event.key === ',' || event.code === 'Enter') && this.input.type === 'single-tag') { if ((event.key === ',' || event.code === 'Enter') && this.input.type === 'single-tag') {
// Coma means the end of input for the current tag in single-tag mode. // Comma/Enter mean the end of input for the current tag in single-tag mode.
this.popup.hide(); this.hidePopup(`User accepted the existing input via key: '${event.key}', code: '${event.code}'`);
return; return;
} }
@ -265,7 +270,7 @@ class Autocomplete {
return; return;
} }
case 'Escape': { case 'Escape': {
this.popup.hide(); this.hidePopup('User pressed "Escape"');
return; return;
} }
case 'ArrowLeft': case 'ArrowLeft':
@ -340,7 +345,14 @@ class Autocomplete {
// brief moment of silence for the user without the popup before they type // brief moment of silence for the user without the popup before they type
// something else, otherwise we'd show some more completions for the current term. // something else, otherwise we'd show some more completions for the current term.
this.input.element.focus(); this.input.element.focus();
this.popup.hide();
// Technically no server-side suggestion request can be in flight at this point.
// If the user managed to accept a suggestion, it means the user already got
// presented with the results of auto-completions, so there is nothing in-flight.
//
// Although, we don't make this a hard assertion just in case, to make sure this
// code is tolerant to any bugs in the described assumption.
this.hidePopup('The user accepted the existing suggestion');
} }
updateInputWithSelectedValue(this: ActiveAutocomplete, suggestion: Suggestion) { updateInputWithSelectedValue(this: ActiveAutocomplete, suggestion: Suggestion) {