From 9f7f5caa6844277b891894af45e440d6eba79bf6 Mon Sep 17 00:00:00 2001
From: shamoon <4887959+shamoon@users.noreply.github.com>
Date: Tue, 2 Apr 2024 15:28:33 -0700
Subject: [PATCH] Fix cases when dom order differs from querylist

---
 .../global-search/global-search.component.ts   | 18 ++++++++++++++----
 1 file changed, 14 insertions(+), 4 deletions(-)

diff --git a/src-ui/src/app/components/app-frame/global-search/global-search.component.ts b/src-ui/src/app/components/app-frame/global-search/global-search.component.ts
index ff143a39e..7223dcfa9 100644
--- a/src-ui/src/app/components/app-frame/global-search/global-search.component.ts
+++ b/src-ui/src/app/components/app-frame/global-search/global-search.component.ts
@@ -1,4 +1,5 @@
 import {
+  AfterViewInit,
   Component,
   ElementRef,
   HostListener,
@@ -8,7 +9,7 @@ import {
 } from '@angular/core'
 import { Router } from '@angular/router'
 import { NgbDropdown, NgbModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap'
-import { Subject, debounceTime, distinctUntilChanged, filter } from 'rxjs'
+import { Subject, debounceTime, distinctUntilChanged, filter, map } from 'rxjs'
 import { ObjectWithId } from 'src/app/data/object-with-id'
 import {
   GlobalSearchResult,
@@ -44,6 +45,7 @@ export class GlobalSearchComponent {
   public queryDebounce: Subject<string>
   public searchResults: GlobalSearchResult
   private currentItemIndex: number = -1
+  private domIndex: number = -1
   public loading: boolean = false
 
   @ViewChild('searchInput') searchInput: ElementRef
@@ -79,9 +81,9 @@ export class GlobalSearchComponent {
           this.currentItemIndex = -1
         }
       } else if (event.key === 'ArrowRight') {
-        this.secondaryButtons.get(this.currentItemIndex).nativeElement.focus()
+        this.secondaryButtons.get(this.domIndex).nativeElement.focus()
       } else if (event.key === 'ArrowLeft') {
-        this.primaryButtons.get(this.currentItemIndex).nativeElement.focus()
+        this.primaryButtons.get(this.domIndex).nativeElement.focus()
       }
     }
   }
@@ -218,7 +220,15 @@ export class GlobalSearchComponent {
   }
 
   private setCurrentItem() {
-    const item: ElementRef = this.primaryButtons.get(this.currentItemIndex)
+    // QueryLists do not always reflect the current DOM order, so we need to find the actual element
+    // Yes, using some vanilla JS
+    const result: HTMLElement = this.resultItems.first.nativeElement.parentNode
+      .querySelectorAll('.dropdown-item')
+      .item(this.currentItemIndex)
+    this.domIndex = this.resultItems
+      .toArray()
+      .indexOf(this.resultItems.find((item) => item.nativeElement === result))
+    const item: ElementRef = this.primaryButtons.get(this.domIndex)
     item.nativeElement.focus()
   }