MDL-78885 core: combobox should have a valid aria-controls

- The aria-controls attribute cannot refer to an element that doesn't
  exist
- Also update filterDataset so it returns [] when searchTerm is empty

lib/amd/src/comboboxsearch/search_combobox.js

@@ -317,22 +317,17 @@ export default class {
                 return;
             }
             this.setSearchTerms(this.searchInput.value);
-            // We can also require a set amount of input before search.
+
+            const pendingPromise = new Pending();
             if (this.getSearchTerm() === '') {
                 this.toggleDropdown();
-                // Hide the "clear" search button in the search bar.
                 this.clearSearchButton.classList.add('d-none');
+                await this.filterrenderpipe();
             } else {
-                const pendingPromise = new Pending();
-                await this.renderAndShow().then(() => {
-                    // Display the "clear" search button in the search bar.
-                    this.clearSearchButton.classList.remove('d-none');
-                    return;
-                }).then(() => {
-                    pendingPromise.resolve();
-                    return true;
-                });
+                this.clearSearchButton.classList.remove('d-none');
+                await this.renderAndShow();
             }
+            pendingPromise.resolve();
         }, 300, {pending: true}));
     }
 

lib/templates/local/comboboxsearch/resultset.mustache

@@ -41,17 +41,17 @@
     }
 }}
 <div class="d-flex flex-column mh-100 h-100">
-    {{#hasresults}}
-        <ul id="{{$listid}}list{{/listid}}-result-listbox" class="searchresultitemscontainer d-flex flex-column mw-100 position-relative py-2 list-group h-100 mx-0 {{$listclasses}}{{/listclasses}}" role="listbox" data-region="search-result-items-container" tabindex="-1" aria-label="{{#cleanstr}} aria-comboboxsearchitems, core {{/cleanstr}}">
+    <ul id="{{$listid}}list{{/listid}}-result-listbox" class="searchresultitemscontainer d-flex flex-column mw-100 position-relative py-2 list-group h-100 mx-0 {{$listclasses}}{{/listclasses}}" role="listbox" data-region="search-result-items-container" tabindex="-1" aria-label="{{#cleanstr}} aria-comboboxsearchitems, core {{/cleanstr}}">
+        {{#hasresults}}
             {{$results}}
                 {{#results}}
                     {{>core/local/comboboxsearch/resultitem}}
                 {{/results}}
             {{/results}}
             {{$selectall}}{{/selectall}}
-        </ul>
-    {{/hasresults}}
+        {{/hasresults}}
+    </ul>
     {{^hasresults}}
-        <span class="small d-block px-4 my-4">{{#str}} noresultsfor, core, {{searchterm}}{{/str}}</span>
+        <span class="small d-block px-4 mt-2 mb-4">{{#str}} noresultsfor, core, {{searchterm}}{{/str}}</span>
     {{/hasresults}}
 </div>

user/amd/src/comboboxsearch/user.js

@@ -111,14 +111,7 @@ export default class UserSearch extends search_combobox {
         this.setMatchedResults(await this.filterDataset(await this.getDataset()));
         this.filterMatchDataset();
 
-        const {html, js} = await renderForPromise('core_user/comboboxsearch/resultset', {
-            users: this.getMatchedResults().slice(0, 5),
-            hasresults: this.getMatchedResults().length > 0,
-            matches: this.getMatchedResults().length,
-            searchterm: this.getSearchTerm(),
-            selectall: this.selectAllResultsLink(),
-        });
-        replaceNodeContents(this.getHTMLElements().searchDropdown, html, js);
+        await this.renderDropdown();
     }
 
     /**
@@ -137,13 +130,17 @@ export default class UserSearch extends search_combobox {
      * @returns {Array} The users that match the given criteria.
      */
     async filterDataset(filterableData) {
-        const stringMap = await this.getStringMap();
-        return filterableData.filter((user) => Object.keys(user).some((key) => {
-            if (user[key] === "" || user[key] === null || !stringMap.get(key)) {
-                return false;
-            }
-            return user[key].toString().toLowerCase().includes(this.getPreppedSearchTerm());
-        }));
+        if (this.getPreppedSearchTerm()) {
+            const stringMap = await this.getStringMap();
+            return filterableData.filter((user) => Object.keys(user).some((key) => {
+                if (user[key] === "" || user[key] === null || !stringMap.get(key)) {
+                    return false;
+                }
+                return user[key].toString().toLowerCase().includes(this.getPreppedSearchTerm());
+            }));
+        } else {
+            return [];
+        }
     }
 
     /**