Reuse currency selector

apps/client/src/app/components/user-account-settings/user-account-settings.component.ts

@@ -31,8 +31,9 @@ import {
 } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import {
+  FormControl,
+  FormGroup,
   NonNullableFormBuilder,
-  FormsModule,
   ReactiveFormsModule,
   Validators
 } from '@angular/forms';
@@ -59,7 +60,6 @@ import { catchError } from 'rxjs/operators';
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [
-    FormsModule,
     GfCurrencySelectorComponent,
     GfValueComponent,
     IonIcon,
@@ -79,8 +79,11 @@ import { catchError } from 'rxjs/operators';
 })
 export class GfUserAccountSettingsComponent implements OnInit {
   protected readonly appearancePlaceholder = $localize`Auto`;
-  protected readonly baseCurrencyForm = inject(NonNullableFormBuilder).group({
-    baseCurrency: [{ value: '', disabled: true }]
+  protected readonly baseCurrencyForm = new FormGroup({
+    baseCurrency: new FormControl<string | null>({
+      disabled: true,
+      value: null
+    })
   });
   protected closeUserAccountMailHref: string;
   protected readonly currencies: string[] = [];
@@ -185,10 +188,9 @@ export class GfUserAccountSettingsComponent implements OnInit {
             permissions.updateViewMode
           );
 
-          this.baseCurrencyForm.setValue(
-            { baseCurrency: this.user.settings.baseCurrency ?? '' },
-            { emitEvent: false }
-          );
+          this.baseCurrencyForm.setValue({
+            baseCurrency: this.user.settings.baseCurrency ?? null
+          });
 
           if (this.hasPermissionToUpdateUserSettings) {
             this.baseCurrencyForm.enable({ emitEvent: false });

apps/client/src/app/components/user-account-settings/user-account-settings.html

@@ -3,7 +3,7 @@
   <div class="row">
     <div class="col">
       <div class="d-flex py-1">
-        <form class="w-100">
+        <div class="w-100">
           <div class="d-flex mb-2">
             <div class="align-items-center d-flex pt-1 pt-1 w-50">
               <ng-container i18n>Base Currency</ng-container>
@@ -206,7 +206,7 @@
               </mat-form-field>
             </div>
           </div>
-        </form>
+        </div>
       </div>
       <div class="align-items-center d-flex mt-4 py-1">
         <div class="pr-1 w-50">

libs/ui/src/lib/currency-selector/currency-selector.component.html

@@ -13,6 +13,7 @@
 
 <mat-autocomplete
   #currencyAutocomplete="matAutocomplete"
+  (closed)="onPanelClosed()"
   (optionSelected)="onUpdateCurrency($event)"
 >
   @for (currency of filteredCurrencies; track currency) {

libs/ui/src/lib/currency-selector/currency-selector.component.ts

@@ -30,7 +30,6 @@ import {
   MatAutocomplete,
   MatAutocompleteModule,
   MatAutocompleteOrigin,
-  MatAutocompleteTrigger,
   MatOption
 } from '@angular/material/autocomplete';
 import {
@@ -79,9 +78,6 @@ export class GfCurrencySelectorComponent
   public filteredCurrencies: string[] = [];
   public readonly formControlName = input.required<string>();
 
-  private readonly autocompleteTrigger = viewChild.required(
-    MatAutocompleteTrigger
-  );
   private readonly destroyRef = inject(DestroyRef);
   private readonly formField = inject(MAT_FORM_FIELD);
   private readonly input = viewChild.required(MatInput);
@@ -115,6 +111,10 @@ export class GfCurrencySelectorComponent
     return !this.control.value;
   }
 
+  public override get value() {
+    return super.value;
+  }
+
   public override set value(value: string | null) {
     this.control.setValue(value);
     super.value = value;
@@ -131,10 +131,6 @@ export class GfCurrencySelectorComponent
   }
 
   public ngOnInit() {
-    if (this.disabled) {
-      this.control.disable();
-    }
-
     const formGroup = this.formGroupDirective.form;
 
     if (formGroup) {
@@ -177,18 +173,17 @@ export class GfCurrencySelectorComponent
     }
   }
 
-  public override onBlur() {
+  public onPanelClosed() {
     // Typing clears the selected currency, so restore the last selection once
-    // the user leaves the field without picking an option. The panel is still
-    // open while an option is being clicked, in which case the selection
-    // itself provides the new value.
-    if (!super.value && !this.autocompleteTrigger().panelOpen) {
-      this.value = this.lastSelectedCurrency;
-
-      this.changeDetectorRef.markForCheck();
+    // the panel closes without an option having been picked. An empty input is
+    // left untouched to allow clearing the currency.
+    if (super.value || !this.control.value) {
+      return;
     }
 
-    super.onBlur();
+    this.value = this.lastSelectedCurrency;
+
+    this.changeDetectorRef.markForCheck();
   }
 
   public onUpdateCurrency({ option }: { option: MatOption<string> }) {

libs/ui/src/lib/shared/abstract-mat-form-field.ts

@@ -169,8 +169,6 @@ export abstract class AbstractMatFormField<T>
       this.control.enable({ emitEvent: false });
     }
 
-    this.disabled = isDisabled;
-
     this.stateChanges.next();
   }
 

libs/ui/src/lib/symbol-autocomplete/symbol-autocomplete.component.ts

@@ -115,10 +115,6 @@ export class GfSymbolAutocompleteComponent
   }
 
   public ngOnInit() {
-    if (this.disabled) {
-      this.control.disable();
-    }
-
     this.control.valueChanges
       .pipe(takeUntilDestroyed(this.destroyRef))
       .subscribe(() => {