diff --git a/api/js/etemplate/Et2Select/SearchMixin.ts b/api/js/etemplate/Et2Select/SearchMixin.ts index 7d0e41182d..8cfb832761 100644 --- a/api/js/etemplate/Et2Select/SearchMixin.ts +++ b/api/js/etemplate/Et2Select/SearchMixin.ts @@ -257,6 +257,8 @@ export const Et2WithSearchMixin = dedupeMixin( private _total_result_count = 0; + protected _searchPromise = null; + /** * These characters will end a free tag * @type {string[]} @@ -491,8 +493,26 @@ export const Et2WithSearchMixin = dedupeMixin( return nothing; } - return html` + const noSuggestions = html`
${this.egw().lang("no suggestions")}
`; + + if(!this._searchPromise) + { + return noSuggestions; + } + + let noResults = this._searchPromise.then(() => + { + return this._total_result_count == 0 ? + noSuggestions : + nothing; + }); + + return html`${until( + noResults, + html` + ` + )}`; } /** @@ -1058,11 +1078,6 @@ export const Et2WithSearchMixin = dedupeMixin( this.setAttribute("searching", ""); - // Show a spinner - let spinner = document.createElement("sl-spinner"); - spinner.slot = "expand-icon"; - this.select.appendChild(spinner); - // Hide clear button let clear_button = this._searchInputNode?.shadowRoot?.querySelector(".input__clear"); if(clear_button) @@ -1073,17 +1088,14 @@ export const Et2WithSearchMixin = dedupeMixin( // Clear previous results this._total_result_count = 0; this._clearResults(); - await this.updateComplete; // Start the searches - return Promise.all([ + this._searchPromise = Promise.all([ this.localSearch(this._searchInputNode.value, this.searchOptions), this.remoteSearch(this._searchInputNode.value, this.searchOptions) ]).then(async() => { this.removeAttribute("searching"); - // Remove spinner - spinner.remove(); // Restore clear button if(clear_button) @@ -1091,7 +1103,13 @@ export const Et2WithSearchMixin = dedupeMixin( clear_button.style.display = ""; } await this.updateComplete; + + this._searchPromise = null; }); + + this.requestUpdate(); + + return this._searchPromise; } /**