mirror of
https://github.com/philomena-dev/philomena.git
synced 2025-03-23 20:27:14 +01:00
Abort the server-side completions when the autocomplete popup needs to be hidden
This commit is contained in:
parent
a3ab0d2b41
commit
dd7ee44e36
1 changed files with 17 additions and 5 deletions
|
@ -229,18 +229,23 @@ class Autocomplete {
|
|||
// 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.
|
||||
// When you inspect it, a `focusout` happens.
|
||||
this.popup.hide();
|
||||
this.hidePopup('The user clicked away');
|
||||
this.input = null;
|
||||
}
|
||||
}
|
||||
|
||||
hidePopup(reason: string) {
|
||||
this.serverSideTagSuggestions.abortLastSchedule(`[Autocomplete] Popup was hidden. ${reason}`);
|
||||
this.popup.hide();
|
||||
}
|
||||
|
||||
onKeyDown(event: KeyboardEvent) {
|
||||
if (!this.isActive() || this.input.element !== event.target) {
|
||||
return;
|
||||
}
|
||||
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.
|
||||
this.popup.hide();
|
||||
// Comma/Enter mean the end of input for the current tag in single-tag mode.
|
||||
this.hidePopup(`User accepted the existing input via key: '${event.key}', code: '${event.code}'`);
|
||||
return;
|
||||
}
|
||||
|
||||
|
@ -265,7 +270,7 @@ class Autocomplete {
|
|||
return;
|
||||
}
|
||||
case 'Escape': {
|
||||
this.popup.hide();
|
||||
this.hidePopup('User pressed "Escape"');
|
||||
return;
|
||||
}
|
||||
case 'ArrowLeft':
|
||||
|
@ -340,7 +345,14 @@ class Autocomplete {
|
|||
// 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.
|
||||
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) {
|
||||
|
|
Loading…
Add table
Reference in a new issue