VSB-TUO/Highlight actual option in dropdown menu (#1012)

Co-authored-by: Matus Kasak <matus.kasak@dataquest.sk>

Author: Kasinhou

src/app/shared/form/builder/ds-dynamic-form-ui/models/scrollable-dropdown/dynamic-scrollable-dropdown.component.html

@@ -48,7 +48,7 @@
         <i>{{ 'dropdown.clear' | translate }}</i>
       </button>
       <button class="dropdown-item collection-item text-truncate" *ngFor="let listEntry of optionsList; let i = index"
-              [class.active]="i === selectedIndex"
+              [class.active]="inputFormatter(listEntry) === (currentValue | async) || i === selectedIndex"
               (keydown.enter)="onSelect(listEntry); sdRef.close()" (mousedown)="onSelect(listEntry); sdRef.close()"
               title="{{ inputFormatter(listEntry) }}" role="option"
               [attr.id]="inputFormatter(listEntry) === (currentValue|async) ? ('combobox_' + id + '_selected') : null">

src/app/shared/form/builder/ds-dynamic-form-ui/models/scrollable-dropdown/dynamic-scrollable-dropdown.component.ts

@@ -95,6 +95,32 @@ export class DsDynamicScrollableDropdownComponent extends DsDynamicVocabularyCom
     });
   }
 
+  /**
+   * Compute the index of the current form value within optionsList.
+   * Returns -1 when there is no current value or it cannot be matched.
+   */
+  private getIndexForCurrentValue(): number {
+    try {
+      if (!this.optionsList || this.optionsList.length === 0) { return -1; }
+      const rawVal = this.group?.get(this.model.id)?.value;
+      if (isEmpty(rawVal)) { return -1; }
+
+      let currentStr: string;
+      if (typeof rawVal === 'string') {
+        currentStr = rawVal;
+      } else if (this.useFindAllService) {
+        currentStr = rawVal?.[this.model.displayKey];
+      } else {
+        currentStr = rawVal?.display;
+      }
+      if (isEmpty(currentStr)) { return -1; }
+
+      return this.optionsList.findIndex((le: any) => this.inputFormatter(le) === currentStr);
+    } catch {
+      return -1;
+    }
+  }
+
   /**
    * Get service and method to use to retrieve dropdown options
    */
@@ -114,17 +140,21 @@ export class DsDynamicScrollableDropdownComponent extends DsDynamicVocabularyCom
       tap(() => this.loading = false),
     ).subscribe((list: PaginatedList<CacheableObject>) => {
       this.optionsList = list.page;
-        if (fromInit && this.model.value) {
-          this.setCurrentValue(this.model.value, true);
-        }
+      if (fromInit && this.model.value) {
+        this.setCurrentValue(this.model.value, true);
+      }
 
       this.updatePageInfo(
         list.pageInfo.elementsPerPage,
         list.pageInfo.currentPage,
         list.pageInfo.totalElements,
         list.pageInfo.totalPages
       );
-      this.selectedIndex = 0;
+
+      // Determine which option should be highlighted by default based on current value
+      const idx = this.getIndexForCurrentValue();
+      this.selectedIndex = (idx >= 0) ? idx : -1;
+
       this.cdr.detectChanges();
     });
   }