From 44a3fcd7d5808d61caa8af5432487841cb8490b1 Mon Sep 17 00:00:00 2001
From: Solomon Kahsai <solomon.kahsai@tuwien.ac.at>
Date: Tue, 23 Dec 2025 11:33:43 +0100
Subject: [PATCH] Fix: Load dropdown items dynamically and mark current
 selection

Dynamic Loading:
- Uses actual vocabulary size from pageInfo.totalElements
- Caps at 200 items to prevent loading huge vocabularies
- Performance scaled: 50 items (Good UX), 100 items (Acceptable), 200 items (Borderline)

Selection Highlighting:
- Highlight current value when menu opens (setSelectedIndexToCurrentValue)
- Treat 'Clear selection' as index 0, adjust item indices (i+1)
- Arrow key navigation respects clear item (totalItems)
- Enter selects correct item or clears when index = 0
- Skip disabled items in scrollToSelected
- Selected items now highlighted correctly up to position 200# This is the 1st commit message:
---
 ...dynamic-scrollable-dropdown.component.html |  3 +-
 .../dynamic-scrollable-dropdown.component.ts  | 58 ++++++++++++++++---
 2 files changed, 52 insertions(+), 9 deletions(-)

diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/scrollable-dropdown/dynamic-scrollable-dropdown.component.html b/src/app/shared/form/builder/ds-dynamic-form-ui/models/scrollable-dropdown/dynamic-scrollable-dropdown.component.html
index b60c93bb87f..e55420aa9f4 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/scrollable-dropdown/dynamic-scrollable-dropdown.component.html
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/scrollable-dropdown/dynamic-scrollable-dropdown.component.html
@@ -49,6 +49,7 @@
         </button>
       }
       <button class="dropdown-item collection-item text-truncate"
+        [class.active]="selectedIndex === 0"
         (click)="onSelect(undefined); sdRef.close()" (mousedown)="onSelect(undefined); sdRef.close()"
         title="{{ 'dropdown.clear.tooltip' | translate }}" role="option"
         type="button">
@@ -56,7 +57,7 @@
       </button>
       @for (listEntry of optionsList; track listEntry; let i = $index) {
         <button class="dropdown-item collection-item text-truncate"
-          [class.active]="i === selectedIndex"
+          [class.active]="selectedIndex === (i + 1)"
           (keydown.enter)="onSelect(listEntry); sdRef.close()" (mousedown)="onSelect(listEntry); sdRef.close()"
           title="{{ inputFormatter(listEntry) }}" role="option" type="button"
           [attr.id]="inputFormatter(listEntry) === (currentValue|async) ? ('combobox_' + id + '_selected') : null">
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/scrollable-dropdown/dynamic-scrollable-dropdown.component.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/models/scrollable-dropdown/dynamic-scrollable-dropdown.component.ts
index 11894f8420c..0e287236f6e 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/scrollable-dropdown/dynamic-scrollable-dropdown.component.ts
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/scrollable-dropdown/dynamic-scrollable-dropdown.component.ts
@@ -149,7 +149,7 @@ export class DsDynamicScrollableDropdownComponent extends DsDynamicVocabularyCom
     }
   }
 
-  loadOptions(fromInit: boolean) {
+  loadOptions(fromInit: boolean, scrollAfterLoad: boolean = false) {
     this.loading = true;
     this.getDataFromService().pipe(
       getFirstSucceededRemoteDataPayload(),
@@ -167,7 +167,11 @@ export class DsDynamicScrollableDropdownComponent extends DsDynamicVocabularyCom
         list.pageInfo.totalElements,
         list.pageInfo.totalPages,
       );
-      this.selectedIndex = 0;
+
+      if (!fromInit) {
+        this.setSelectedIndexToCurrentValue(scrollAfterLoad);
+      }
+
       this.cdr.detectChanges();
     });
   }
@@ -185,15 +189,49 @@ export class DsDynamicScrollableDropdownComponent extends DsDynamicVocabularyCom
     if (!this.model.readOnly) {
       this.group.markAsUntouched();
       this.inputText = null;
-      this.updatePageInfo(this.model.maxOptions, 1);
-      this.loadOptions(false);
+
+      const pageSize = Math.min(this.pageInfo.totalElements, 200);
+      this.updatePageInfo(pageSize, 1);
+
+      this.loadOptions(false, true);
+      this.setSelectedIndexToCurrentValue(true);
       sdRef.open();
     }
   }
 
+  /**
+   * Set the selectedIndex to match the current value when dropdown opens
+   * @param shouldScroll Whether to scroll to the selected item after setting the index
+   */
+  private setSelectedIndexToCurrentValue(shouldScroll: boolean = false): void {
+    if (this.currentValue) {
+      this.currentValue.pipe(take(1)).subscribe(currentVal => {
+        if (currentVal && this.optionsList.length > 0) {
+          const foundIndex = this.optionsList.findIndex(entry =>
+            this.inputFormatter(entry) === currentVal,
+          );
+          this.selectedIndex = foundIndex >= 0 ? foundIndex + 1 : 0;
+        } else {
+          this.selectedIndex = 0;
+        }
+
+        if (shouldScroll && this.selectedIndex > 0) {
+          // Ensure DOM is updated before scrolling
+          this.cdr.detectChanges();
+          // Use setTimeout to ensure the active class is applied and rendered
+          setTimeout(() => this.scrollToSelected(), 0);
+        }
+      });
+    } else {
+      this.selectedIndex = 0;
+    }
+  }
+
   navigateDropdown(event: KeyboardEvent) {
+    const totalItems = this.optionsList.length + 1;
+
     if (event.key === 'ArrowDown') {
-      this.selectedIndex = Math.min(this.selectedIndex + 1, this.optionsList.length - 1);
+      this.selectedIndex = Math.min(this.selectedIndex + 1, totalItems - 1);
     } else if (event.key === 'ArrowUp') {
       this.selectedIndex = Math.max(this.selectedIndex - 1, 0);
     }
@@ -201,10 +239,10 @@ export class DsDynamicScrollableDropdownComponent extends DsDynamicVocabularyCom
   }
 
   scrollToSelected() {
-    const dropdownItems = this.dropdownMenu.nativeElement.querySelectorAll('.dropdown-item');
+    const dropdownItems = this.dropdownMenu.nativeElement.querySelectorAll('.dropdown-item:not(.disabled)');
     const selectedItem = dropdownItems[this.selectedIndex];
     if (selectedItem) {
-      selectedItem.scrollIntoView({ block: 'nearest' });
+      selectedItem.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
     }
   }
 
@@ -220,7 +258,11 @@ export class DsDynamicScrollableDropdownComponent extends DsDynamicVocabularyCom
       event.preventDefault();
       event.stopPropagation();
       if (sdRef.isOpen()) {
-        this.onSelect(this.optionsList[this.selectedIndex]);
+        if (this.selectedIndex === 0) {
+          this.onSelect(undefined);
+        } else {
+          this.onSelect(this.optionsList[this.selectedIndex - 1]);
+        }
         sdRef.close();
       } else {
         sdRef.open();