fix: fix some glitches in the behavior of dropdown components

- avoid ExpressionChangedAfterItHasBeenCheckedError caused by use of `focused` in own template
- fix displaying of all options when reopening

Author: sleidig

src/app/core/admin/admin-entity-details/admin-entity-field/admin-entity-field.stories.ts

@@ -24,7 +24,8 @@ export default {
         {
           provide: MAT_DIALOG_DATA,
           useValue: {
-            entitySchemaField: { id: null },
+            entitySchemaField: { id: "name" },
+            entityType: TestEntity,
           },
         },
         { provide: MatDialogRef, useValue: null },

src/app/core/common-components/basic-autocomplete/basic-autocomplete.component.html

@@ -1,7 +1,7 @@
 <!--Display-->
 <input
   *ngIf="display === 'text' || display === 'none'; else chipsDisplay"
-  [hidden]="focused || display === 'none'"
+  [hidden]="isInSearchMode() || display === 'none'"
   [disabled]="_disabled"
   matInput
   style="text-overflow: ellipsis; width: calc(100% - 50px)"
@@ -13,7 +13,7 @@
 
 <!--Search-->
 <input
-  [hidden]="!focused"
+  [hidden]="!isInSearchMode()"
   #inputElement
   [formControl]="autocompleteForm"
   matInput
@@ -31,7 +31,7 @@
   #autoSuggestions="matAutocomplete"
   (optionSelected)="select($event.option.value)"
   autoActiveFirstOption
-  [hideSingleSelectionIndicator]="multi"
+  [hideSingleSelectionIndicator]="true"
 >
   <div
     cdkDropList
@@ -43,11 +43,15 @@
       [style.height]="(autocompleteOptions?.length ?? 0) * 48 + 'px'"
       [style.max-height]="3 * 48 + 'px'"
       itemSize="48"
+      minBufferPx="200"
     >
       <mat-option
         [value]="item"
         cdkDrag
-        *cdkVirtualFor="let item of autocompleteOptions"
+        *cdkVirtualFor="
+          let item of autocompleteOptions;
+          trackBy: trackByOptionValueFn
+        "
       >
         <div class="flex-row disable-autocomplete-active-color align-center">
           <div *ngIf="reorder">

src/app/core/common-components/basic-autocomplete/basic-autocomplete.component.spec.ts

@@ -163,13 +163,13 @@ describe("BasicAutocompleteComponent", () => {
 
     component.showAutocomplete();
     expect(component.autocompleteForm).toHaveValue("");
-    expect(component.focused).toBeTrue();
+    expect(component.isInSearchMode()).toBeTrue();
 
     component.onFocusOut({} as any);
     tick(200);
 
     expect(component.displayText).toBe("some, values");
-    expect(component.focused).toBeFalse();
+    expect(component.isInSearchMode()).toBeFalse();
   }));
 
   it("should update the error state if the form is invalid", () => {

src/app/core/common-components/basic-autocomplete/basic-autocomplete.component.ts

@@ -9,8 +9,11 @@ import {
   Optional,
   Output,
   Self,
+  signal,
   TemplateRef,
+  TrackByFunction,
   ViewChild,
+  WritableSignal,
 } from "@angular/core";
 import { AsyncPipe, NgForOf, NgIf, NgTemplateOutlet } from "@angular/common";
 import { MatFormFieldControl } from "@angular/material/form-field";
@@ -153,16 +156,30 @@ export class BasicAutocompleteComponent<O, V = O>
   @Input() set options(options: O[]) {
     this._options = options.map((o) => this.toSelectableOption(o));
   }
-  retainSearchValue: string;
   private _options: SelectableOption<O, V>[] = [];
 
   _selectedOptions: SelectableOption<O, V>[] = [];
 
+  /**
+   * Keep the search value to help users quickly multi-select multiple related options without having to type filter text again
+   */
+  retainSearchValue: string;
+
   /**
    * Display the selected items as simple text, as chips or not at all (if used in combination with another component)
    */
   @Input() display: "text" | "chips" | "none" = "text";
 
+  /**
+   * display the search input rather than the selected elements only
+   * (when the form field gets focused).
+   */
+  isInSearchMode: WritableSignal<boolean> = signal(false);
+  trackByOptionValueFn: TrackByFunction<SelectableOption<O, V>> | undefined = (
+    i,
+    o,
+  ) => o?.asValue;
+
   constructor(
     elementRef: ElementRef<HTMLElement>,
     errorStateMatcher: ErrorStateMatcher,
@@ -232,9 +249,11 @@ export class BasicAutocompleteComponent<O, V = O>
   }
 
   showAutocomplete(valueToRevertTo?: string) {
-    if (this.retainSearchValue) {
+    if (this.multi && this.retainSearchValue) {
+      // reset the search value to previously entered text to help user selecting multiple similar options without retyping filter text
       this.autocompleteForm.setValue(this.retainSearchValue);
     } else {
+      // reset the search value to show all available options again
       this.autocompleteForm.setValue("");
     }
     if (!this.multi) {
@@ -254,10 +273,10 @@ export class BasicAutocompleteComponent<O, V = O>
       }
     });
 
-    this.focus();
+    this.isInSearchMode.set(true);
 
     // update virtual scroll as the container remains empty until the user scrolls initially
-    this.virtualScrollViewport.scrollToIndex(0);
+    this.virtualScrollViewport.checkViewportSize();
   }
 
   private updateAutocomplete(inputText: string): SelectableOption<O, V>[] {
@@ -344,7 +363,7 @@ export class BasicAutocompleteComponent<O, V = O>
     } else {
       this._selectedOptions = [option];
       this.value = option.asValue;
-      this.blur();
+      this.isInSearchMode.set(false);
     }
   }
 
@@ -364,7 +383,7 @@ export class BasicAutocompleteComponent<O, V = O>
       if (!this.multi && this.autocompleteForm.value === "") {
         this.select(undefined);
       }
-      this.blur();
+      this.isInSearchMode.set(false);
     }
   }