Don't automatically select 0th autocomplete candidate (#1753)

* Don't automatically select 0th autocomplete candidate

This is a port of GoogleChrome/chromium-dashboard#5346

* Update frontend/src/static/js/components/webstatus-typeahead.ts

Author: jcscottiii

frontend/src/static/js/components/webstatus-typeahead.ts

@@ -20,6 +20,7 @@ import {
   type TemplateResult,
   css,
   html,
+  nothing,
 } from 'lit';
 import {customElement, property, state} from 'lit/decorators.js';
 import {SHARED_STYLES} from '../css/shared-css.js';
@@ -289,6 +290,7 @@ export class WebstatusTypeahead extends LitElement {
         @click=${(e: Event) => e.preventDefault()}
         @sl-select=${this.handleCandidateSelected}
       >
+        <webstatus-typeahead-invisible-item></webstatus-typeahead-invisible-item>
         ${this.candidates.map(
           c => html`
             <webstatus-typeahead-item
@@ -318,7 +320,11 @@ export class WebstatusTypeahead extends LitElement {
 @customElement('webstatus-typeahead-dropdown')
 export class WebstatusTypeaheadDropdown extends SlDropdown {
   getCurrentItem(): SlMenuItem | undefined {
-    return this.getMenu()!.getCurrentItem();
+    const item = this.getMenu()!.getCurrentItem();
+    if (!item || item instanceof WebstatusTypeaheadInvisibleItem) {
+      return undefined;
+    }
+    return item;
   }
 
   setCurrentItem(newCurrentItem: SlMenuItem) {
@@ -327,6 +333,13 @@ export class WebstatusTypeaheadDropdown extends SlDropdown {
     newCurrentItem.scrollIntoView({block: 'nearest', behavior: 'smooth'});
   }
 
+  getAllVisibleItems(menu: SlMenu): SlMenuItem[] {
+    const items = menu.getAllItems();
+    return items.filter(
+      item => !(item instanceof WebstatusTypeaheadInvisibleItem),
+    );
+  }
+
   resetSelection() {
     const currentItem = this.getCurrentItem();
     currentItem?.setAttribute('tabindex', '-1');
@@ -337,7 +350,7 @@ export class WebstatusTypeaheadDropdown extends SlDropdown {
     if (!menu) {
       return;
     }
-    const menuItems = menu.getAllItems();
+    const menuItems = this.getAllVisibleItems(menu);
     if (menuItems.length === 0) {
       return;
     }
@@ -480,3 +493,10 @@ export class WebstatusTypeaheadItem extends LitElement {
     `;
   }
 }
+
+@customElement('webstatus-typeahead-invisible-item')
+export class WebstatusTypeaheadInvisibleItem extends WebstatusTypeaheadItem {
+  override render(): TemplateResult {
+    return html`${nothing}`;
+  }
+}