diff --git a/index.html b/index.html
index d51f333..21a06c3 100644
--- a/index.html
+++ b/index.html
@@ -429,7 +429,6 @@
this.#refs.form = clone.querySelector('.form');
this.#refs.input = clone.querySelector('.input');
this.#refs.suggestionsContainer = clone.querySelector('.suggestions');
- this.#refs.input.addEventListener('focus', this.#onFocusInput);
this.#refs.input.addEventListener('input', this.#onInput);
const onSubmit = () => this.#execute(this.#refs.input.value);
this.#refs.form.addEventListener('submit', onSubmit, false);
@@ -448,12 +447,16 @@
static #fetchDuckDuckGoSuggestions(search) {
return new Promise((resolve) => {
- window.autocompleteCallback = (res) =>
- resolve(
- res
- .filter((item) => item.phrase !== search.toLowerCase())
- .map((item) => item.phrase)
- );
+ window.autocompleteCallback = (res) => {
+ const suggestions = [];
+
+ for (const item of res) {
+ if (item.phrase === search.toLowerCase()) continue;
+ suggestions.push(item.phrase);
+ }
+
+ resolve(suggestions);
+ };
const script = document.createElement('script');
document.querySelector('head').appendChild(script);
@@ -561,16 +564,14 @@
else this.#refs.input.focus();
}
- #onFocusInput = (e) => {
- const target = e.currentTarget;
+ #onInput = async () => {
+ const q = SearchComponent.#parseQuery(this.#refs.input.value);
- requestAnimationFrame(() => {
- if (!target.value) this.#close();
- });
- };
+ if (!q.query) {
+ this.#close();
+ return;
+ }
- #onInput = async (e) => {
- const q = SearchComponent.#parseQuery(e.currentTarget.value);
let suggestions = CONFIG.suggestions[q.query] ?? [];
if (q.search && suggestions.length < SearchComponent.#SUGGESTION_LIMIT) {
@@ -586,13 +587,17 @@
if (!this.#refs.dialog.open) {
this.#refs.dialog.showModal();
this.#refs.input.focus();
+
+ requestAnimationFrame(() => {
+ // close the search dialog before the next repaint if a character is
+ // not produced (e.g. if you type shift, control, alt etc.)
+ if (!this.#refs.input.value) this.#close();
+ });
+
return;
}
- if (
- e.key === 'Escape' ||
- (e.key === 'Backspace' && !this.#refs.input.value)
- ) {
+ if (e.key === 'Escape') {
this.#close();
return;
}