fix(ui): cvi-ng-select default option EBS-1170 STPA-247 (#208)

* fix(ui): cvi-ng-select default option EBS-1170 STPA-247 * fix(ui): when an option had been preselected in cvi-ng-select that has to be scrolled to, scroll to it when opening the popup again EBS-1170 STPA-247 --------- Co-authored-by: keit.jarve <[email protected]> Co-authored-by: Aleksandr Beliaev <[email protected]>
e-gov · Nov 8, 2023 · 55020d6 · 55020d6
1 parent bd4c97d
commit 55020d6
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 1 deletion.
diff --git a/libs/ui/src/lib/select/select-navigation.directive.ts b/libs/ui/src/lib/select/select-navigation.directive.ts
@@ -14,6 +14,7 @@ import {
 export class SelectNavigationDirective implements AfterViewInit {
   @Input() scrollableEl?: HTMLElement;
   @Input() inputField?: HTMLInputElement | ElementRef<HTMLInputElement>;
+  @Input() selectedItemIndex = 0;
   @Output() closed: EventEmitter<any> = new EventEmitter();
   @Output() itemFocused: EventEmitter<number> = new EventEmitter();
 
@@ -47,7 +48,8 @@ export class SelectNavigationDirective implements AfterViewInit {
   constructor(private readonly hostEl: ElementRef) {}
 
   ngAfterViewInit(): void {
-    this.focusByIndex(0);
+    this.focusByIndex(this.selectedItemIndex);
+    this.scrollToFocusedElement(this.hostEl.nativeElement);
   }
 
   private isEventOfKey(key: string, event: KeyboardEvent): boolean {

diff --git a/libs/ui/src/lib/select/select.component.html b/libs/ui/src/lib/select/select.component.html
@@ -70,6 +70,7 @@
           cviNgSelectNavigation
           [scrollableEl]="popup"
           [inputField]="searchInput"
+          [selectedItemIndex]="selectedItemIndex"
           (closed)="close()"
           (itemFocused)="updateFocusedItem($event)"
           [attr.aria-labelledby]="labelId"

diff --git a/libs/ui/src/lib/select/select.component.ts b/libs/ui/src/lib/select/select.component.ts
@@ -83,6 +83,7 @@ export class SelectComponent
   itemsList: SelectItemsList;
   searchInputFocused = false;
   focusedOptionIndex: number | null = null;
+  selectedItemIndex = 0;
 
   private readonly destroy$ = new Subject<void>();
   private readonly select: HTMLElement;
@@ -177,6 +178,9 @@ export class SelectComponent
 
   selectItem(item: SelectOption): void {
     this.itemsList.select(item);
+    this.selectedItemIndex = this.itemsList.filteredItems.findIndex(
+      (option) => option === item
+    );
 
     const selectedValue = this.bindValue
       ? this.itemsList.selectedItem?.value[this.bindValue]