More robust autocomplete

e2e/integration/LinkingChildToSchool.cy.ts

@@ -25,7 +25,7 @@ describe("Scenario: Linking a child to a school - E2E test", function () {
 
     // choose the school to add
     cy.contains("mat-form-field", "School")
-      .find("[matInput]")
+      .find("[matInput]:visible")
       .type("E2E School{enter}");
 
     // save school in child profile

src/app/core/configurable-enum/basic-autocomplete/basic-autocomplete.component.html

@@ -1,13 +1,25 @@
+<!--Search-->
 <input
+  [hidden]="!focused"
   #inputElement
   [formControl]="autocompleteForm"
   matInput
   style="text-overflow: ellipsis"
   [matAutocomplete]="autoSuggestions"
-  (focusin)="onFocusIn()"
   (focusout)="onFocusOut($event)"
 />
+<!--Display-->
+<input
+  [hidden]="focused"
+  [disabled]="_disabled"
+  matInput
+  style="text-overflow: ellipsis"
+  (focusin)="onFocusIn()"
+  (focusout)="onFocusIn()"
+  [value]="displayText"
+/>
 <mat-autocomplete
+  [disableRipple]="true"
   #autoSuggestions="matAutocomplete"
   (optionSelected)="select($event.option.value)"
   autoActiveFirstOption

src/app/core/configurable-enum/basic-autocomplete/basic-autocomplete.component.spec.ts

@@ -145,12 +145,15 @@ describe("BasicAutocompleteComponent", () => {
     expect(options).toHaveSize(3);
 
     await options[2].click();
+    // When browser is not in foreground, this doesn't happen automatically
+    component.autocomplete.openPanel();
+    fixture.detectChanges();
     await options[1].click();
 
     expect(component.value).toEqual([0, 2]);
   });
 
-  it("should clear the input when focusing in multi select mode", fakeAsync(() => {
+  it("should switch the input when focusing in multi select mode", fakeAsync(() => {
     component.multi = true;
     component.options = ["some", "values", "and", "other", "options"];
     component.value = ["some", "values"];
@@ -159,11 +162,13 @@ describe("BasicAutocompleteComponent", () => {
 
     component.onFocusIn();
     expect(component.autocompleteForm).toHaveValue("");
+    expect(component.focused).toBeTrue();
 
     component.onFocusOut({} as any);
     tick(200);
 
-    expect(component.autocompleteForm).toHaveValue("some, values");
+    expect(component.displayText).toBe("some, values");
+    expect(component.focused).toBeFalse();
   }));
 
   it("should update the error state if the form is invalid", () => {

src/app/core/configurable-enum/basic-autocomplete/basic-autocomplete.component.ts

@@ -82,7 +82,17 @@ export class BasicAutocompleteComponent<O, V = O>
     startWith([] as SelectableOption<O, V>[])
   );
   showAddOption = false;
-  private delayedBlur: any;
+
+  get displayText() {
+    if (this.multi) {
+      return this._options
+        .filter((o) => o.selected)
+        .map((o) => o.asString)
+        .join(", ");
+    } else {
+      return this.autocompleteForm.value;
+    }
+  }
 
   get disabled(): boolean {
     return this._disabled;
@@ -212,8 +222,7 @@ export class BasicAutocompleteComponent<O, V = O>
         .filter((o) => o.selected)
         .map((o) => o.asValue);
       // re-open autocomplete to select next option
-      this.autocompleteForm.setValue("");
-      setTimeout(() => this.autocomplete.openPanel(), 100);
+      this.onFocusIn();
     } else {
       this.autocompleteForm.setValue(option.asString);
       this.value = option.asValue;
@@ -230,48 +239,46 @@ export class BasicAutocompleteComponent<O, V = O>
   }
 
   onFocusIn() {
-    clearTimeout(this.delayedBlur);
-    if (!this.focused) {
-      if (this.multi) {
-        this.autocompleteForm.setValue("");
-      } else {
-        this.showAutocomplete();
-      }
-      this.focus();
+    if (this.multi) {
+      this.autocompleteForm.setValue("");
+    } else {
+      this.showAutocomplete();
     }
+    setTimeout(() => this.inputElement.focus());
+    this.focus();
   }
 
   onFocusOut(event: FocusEvent) {
     if (
       !this.elementRef.nativeElement.contains(event.relatedTarget as Element)
     ) {
-      // use short timeout in order for creating an option to work
-      this.delayedBlur = setTimeout(() => this.notifyFocusOut(), 200);
+      if (!this.multi) {
+        this.checkForExactMatch();
+      }
+      this.blur();
     }
   }
 
-  private notifyFocusOut() {
-    if (this.multi) {
-      this.displaySelectedOptions();
-    } else {
-      const inputValue = this.autocompleteForm.value;
-      const selectedOption = this._options.find(
-        ({ asValue }) => asValue === this._value
+  private checkForExactMatch() {
+    const inputValue = this.autocompleteForm.value;
+    const selectedOption = this._options.find(
+      ({ asValue }) => asValue === this._value
+    );
+    if (selectedOption?.asString !== inputValue) {
+      // try to select the option that matches the input string
+      const matchingOption = this._options.find(
+        ({ asString }) => asString.toLowerCase() === inputValue.toLowerCase()
       );
-      if (selectedOption?.asString !== inputValue) {
-        // try to select the option that matches the input string
-        const matchingOption = this._options.find(
-          ({ asString }) => asString.toLowerCase() === inputValue.toLowerCase()
-        );
-        this.select(matchingOption);
-      }
+      this.select(matchingOption);
     }
-    this.blur();
   }
 
   onContainerClick(event: MouseEvent) {
-    if ((event.target as Element).tagName.toLowerCase() != "input") {
-      this.inputElement.focus();
+    if (
+      !this._disabled &&
+      (event.target as Element).tagName.toLowerCase() != "input"
+    ) {
+      this.onFocusIn();
     }
   }