fix(scroll behaviour): Fix Search Result Scrolling Behaviour (#538)

* fix scrolling behaviour

* improve search experience

* Use real header height for scroll offset of ah-table

* Fix header height

* Improve timeout

---------

Co-authored-by: Maxim Uhlemann <[email protected]>

Author: hf-krechan

src/app/features/ahbs/components/ahb-table/ahb-table.component.html

@@ -1,6 +1,6 @@
 <div class="relative bg-hf-pastell-rose">
   <table class="table-auto w-full text-sm text-gray-500">
-    <thead>
+    <thead #header>
       <tr>
         <th
           scope="col"

src/app/features/ahbs/components/ahb-table/ahb-table.component.ts

@@ -32,7 +32,7 @@ export class AhbTableComponent {
   formatVersion = input.required<string>();
   pruefi = input.required<string>();
 
-  selectElement = output<{ element: HTMLElement; offsetY: number }>();
+  scrollToElement = output<{ element: HTMLElement; offsetY: number }>();
 
   private highlightSignal = computed(() => this.highlight());
   markIndex = signal(0);
@@ -50,33 +50,20 @@ export class AhbTableComponent {
     return Array.from(nativeElement.querySelectorAll('mark'));
   });
 
-  selectedMarkElement = computed(() => {
-    const markIndex = this.markIndex();
-    const markElements = this.markElements();
-    if (markElements.length === 0 || markElements.length < markIndex + 1) {
-      return null;
-    }
-    return markElements[this.markIndex()];
-  });
-
   constructor(private readonly elementRef: ElementRef) {
+    // Watch for highlight changes to reset the index
     effect(() => {
-      const selectedMarkElement = this.selectedMarkElement();
-      if (selectedMarkElement === null) {
-        return;
+      const highlight = this.highlight();
+      if (highlight) {
+        this.markIndex.set(0);
+        setTimeout(() => this.applyCurrentMark());
       }
-      // make selected element orange
-      const markElements = this.markElements();
-      markElements.forEach(el => el.classList.remove('bg-orange-500'));
-      selectedMarkElement.classList.add('bg-orange-500');
-      // notify outer scroll container
-      this.scrollToHighlightedElement();
     });
   }
 
   resetMarkIndex() {
     this.markIndex.set(0);
-    this.scrollToHighlightedElement();
+    this.applyCurrentMark();
   }
 
   getHighlight(): string | undefined {
@@ -85,30 +72,43 @@ export class AhbTableComponent {
 
   nextResult() {
     const markElements = this.markElements();
-    if (markElements.length > 0) {
-      const nextIndex = (this.markIndex() + 1) % markElements.length;
-      this.markIndex.set(nextIndex);
-      this.scrollToHighlightedElement();
-    }
+    if (markElements.length === 0) return;
+
+    const nextIndex = (this.markIndex() + 1) % markElements.length;
+    this.markIndex.set(nextIndex);
+    this.applyCurrentMark();
   }
 
   previousResult() {
     const markElements = this.markElements();
-    if (markElements.length > 0) {
-      const previousIndex = (this.markIndex() - 1 + markElements.length) % markElements.length;
-      this.markIndex.set(previousIndex);
-      this.scrollToHighlightedElement();
-    }
+    if (markElements.length === 0) return;
+
+    const previousIndex = (this.markIndex() - 1 + markElements.length) % markElements.length;
+    this.markIndex.set(previousIndex);
+    this.applyCurrentMark();
   }
 
-  scrollToHighlightedElement() {
-    const selectedElement = this.selectedMarkElement();
-    const header = this.header();
-    const headerHeight = header?.nativeElement.getBoundingClientRect().height ?? 0;
-    this.selectElement.emit({
-      element: selectedElement || this.elementRef.nativeElement,
-      offsetY: headerHeight,
-    });
+  private applyCurrentMark() {
+    const markElements = this.markElements();
+    const currentIndex = this.markIndex();
+
+    if (markElements.length === 0 || currentIndex >= markElements.length) {
+      return;
+    }
+
+    // Update highlighting
+    markElements.forEach(el => el.classList.remove('bg-orange-500'));
+    const currentElement = markElements[currentIndex];
+    currentElement.classList.add('bg-orange-500');
+
+    // Notify parent component to scroll to this element
+    if (currentElement) {
+      const headerHeight = this.header()?.nativeElement.getBoundingClientRect().height ?? 0;
+      this.scrollToElement.emit({
+        element: currentElement,
+        offsetY: headerHeight + 20,
+      });
+    }
   }
 
   // determines each time the section_name changes to add a bold rule in ahb-table.component.html

src/app/features/ahbs/views/ahb-page/ahb-page.component.html

@@ -19,7 +19,7 @@
   </app-header>
 
   <!-- Scrollable Content -->
-  <div class="flex-1 overflow-auto relative bg-hf-pastell-rot" *ngIf="!errorOccurred">
+  <div #scroll class="flex-1 overflow-auto relative bg-hf-pastell-rot" *ngIf="!errorOccurred">
     <!-- Metadata Section -->
     @if (ahb$ | async; as ahb) {
       <div class="flex flex-col md:flex-row mb-10">
@@ -58,7 +58,7 @@ <h3 class="font-bold text-[20px]">
         [highlight]="searchQuery()"
         [formatVersion]="formatVersion()"
         [pruefi]="pruefi()"
-        (selectElement)="scrollToElement($event.element, $event.offsetY)" />
+        (scrollToElement)="scrollToElement($event.element, $event.offsetY)" />
     } @else {
       <div class="h-full flex items-center justify-center">
         <p class="text-xl">AHB-Tabelle wird geladen ...</p>

src/app/features/ahbs/views/ahb-page/ahb-page.component.ts

@@ -127,33 +127,29 @@ export class AhbPageComponent implements OnInit, OnDestroy {
 
   triggerSearch(query: string | undefined) {
     if (!query) return;
-
-    const tableComponent = this.table();
-    if (tableComponent) {
-      setTimeout(() => {
-        tableComponent.resetMarkIndex();
-      }, 0);
-    }
   }
 
   scrollToElement(element: HTMLElement, offsetY: number): void {
     const scrollContainer = this.scroll();
-    if (!scrollContainer?.nativeElement) {
-      return;
-    }
-    const containerRect = scrollContainer.nativeElement.getBoundingClientRect();
+    if (!scrollContainer?.nativeElement) return;
+
+    // Get the scroll container
+    const container = scrollContainer.nativeElement;
+
+    // Calculate position accounting for header offset
     const elementRect = element.getBoundingClientRect();
-    const scrollTop =
-      elementRect.top - containerRect.top + scrollContainer.nativeElement.scrollTop - offsetY;
-    scrollContainer.nativeElement.scrollTo({
+    const containerRect = container.getBoundingClientRect();
+    const scrollTop = elementRect.top - containerRect.top + container.scrollTop - offsetY;
+
+    // Scroll smoothly to the element
+    container.scrollTo({
       top: scrollTop,
       behavior: 'smooth',
     });
   }
 
   onSearchQueryChange(query: string | undefined) {
     this.searchQuery.set(query);
-    this.triggerSearch(query);
   }
 
   onNextClick() {

src/app/shared/components/input-search-enhanced/input-search-enhanced.component.html

@@ -9,7 +9,7 @@
     type="text"
     [(ngModel)]="searchQuery"
     placeholder="Suchbegriff eingeben ..."
-    (keyup.enter)="keyupEnter.emit()" />
+    (keydown)="onKeyDown($event)" />
   @if (totalResults()) {
     <div class="align-middle pe-5 text-gray-500">{{ selectedPosition() }}/{{ totalResults() }}</div>
   }

src/app/shared/components/input-search-enhanced/input-search-enhanced.component.ts

@@ -46,6 +46,22 @@ export class InputSearchEnhancedComponent {
       this.updateURL(currentQuery);
     });
   }
+
+  // Handle Enter and Shift+Enter key press to navigate
+  onKeyDown(event: KeyboardEvent) {
+    if (event.key === 'Enter') {
+      if (event.shiftKey) {
+        // Shift+Enter goes to previous result
+        event.preventDefault();
+        this.previousClick.emit();
+      } else {
+        // Enter goes to next result
+        event.preventDefault();
+        this.nextClick.emit();
+      }
+    }
+  }
+
   updateURL(query: string | undefined): void {
     this.router.navigate([], {
       relativeTo: this.route,