Fix wrong item being selected when navigating search items

ui/src/components/search/search-input.ts

@@ -215,7 +215,6 @@ export class SearchInput extends LitElementI18n {
   }
 
   private selectItem(item: SearchItem, options: { keepFocus?: boolean } = {}): void {
-    console.log('select', item);
     const categorized = categorizeSearchItem(item);
     switch (categorized.category) {
       case SearchItemCategory.Location:
@@ -243,10 +242,12 @@ export class SearchInput extends LitElementI18n {
       // rectangle is too small
       const center = Rectangle.center(rectangle);
       center.height = 5000;
+      this.viewer.camera.cancelFlight();
       this.viewer.camera.flyTo({
         destination: Cartographic.toCartesian(center),
       });
     } else {
+      this.viewer.camera.cancelFlight();
       this.viewer.camera.flyTo({
         destination: rectangle,
       });
@@ -290,11 +291,15 @@ export class SearchInput extends LitElementI18n {
       }
       case 'ArrowUp':
       case 'ArrowDown': {
-        const target = this.findActiveResult();
-        if (target != null) {
-          const [item, _element] = target;
-          this.selectItem(item, {keepFocus: true});
-        }
+        // Wait for a short interval before attempting to detect the currently selected item
+        // so the search has time to update the DOM.
+        setTimeout(() => {
+          const target = this.findActiveResult();
+          if (target != null) {
+            const [item, _element] = target;
+            this.selectItem(item, {keepFocus: true});
+          }
+        });
         break;
       }
       default:
@@ -333,6 +338,7 @@ export class SearchInput extends LitElementI18n {
       const child = results.children[i];
       if (child.ariaSelected === 'true') {
         const item = this.resultItems[i];
+        console.log(item, child);
         return [item, child as HTMLLIElement];
       }
     }