Merge pull request #466 from MareStare/feat/hide-autocomplete-when-no-suggestions

Hide the autocomplete popup entirely if there are no items to show

assets/eslint.config.js

@@ -294,7 +294,7 @@ export default tsEslint.config(
         'error',
         {
           // Custom `expectStuff()` functions must also count as assertions.
-          assertFunctionNames: ['expect*', '*.expect*'],
+          assertFunctionNames: ['expect*', '*.expect*', 'assert*'],
         },
       ],
     },

assets/js/utils/__tests__/suggestion-view.spec.ts

@@ -61,7 +61,16 @@ describe('Suggestions', () => {
       [popup, input] = mockBaseSuggestionsPopup();
 
       expect(document.querySelector('.autocomplete')).toBeInstanceOf(HTMLElement);
-      expect(popup.isHidden).toBe(false);
+      assert(popup.isHidden);
+    });
+
+    it('should hide the popup when there are no suggestions to show', () => {
+      [popup, input] = mockBaseSuggestionsPopup();
+
+      popup.setSuggestions({ history: [], tags: [] });
+      popup.showForElement(input);
+
+      assert(popup.isHidden);
     });
 
     it('should render suggestions', () => {

assets/js/utils/suggestions-view.ts

@@ -321,6 +321,13 @@ export class SuggestionsPopupComponent {
   }
 
   showForElement(targetElement: HTMLElement) {
+    if (this.items.length === 0) {
+      // Hide the popup because there are no suggestions to show. We have to do it
+      // explicitly, because a border is still rendered even for an empty popup.
+      this.hide();
+      return;
+    }
+
     this.container.style.position = 'absolute';
     this.container.style.left = `${targetElement.offsetLeft}px`;