diff --git a/apps/client/src/app/components/user-account-settings/user-account-settings.component.ts b/apps/client/src/app/components/user-account-settings/user-account-settings.component.ts index 32860d44d..a4d8a1ba1 100644 --- a/apps/client/src/app/components/user-account-settings/user-account-settings.component.ts +++ b/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({ + 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 }); diff --git a/apps/client/src/app/components/user-account-settings/user-account-settings.html b/apps/client/src/app/components/user-account-settings/user-account-settings.html index 40adccca4..1e60ebc85 100644 --- a/apps/client/src/app/components/user-account-settings/user-account-settings.html +++ b/apps/client/src/app/components/user-account-settings/user-account-settings.html @@ -3,7 +3,7 @@
-
+
Base Currency @@ -206,7 +206,7 @@
- +
diff --git a/libs/ui/src/lib/currency-selector/currency-selector.component.html b/libs/ui/src/lib/currency-selector/currency-selector.component.html index 594515e24..2100b01de 100644 --- a/libs/ui/src/lib/currency-selector/currency-selector.component.html +++ b/libs/ui/src/lib/currency-selector/currency-selector.component.html @@ -13,6 +13,7 @@ @for (currency of filteredCurrencies; track currency) { diff --git a/libs/ui/src/lib/currency-selector/currency-selector.component.ts b/libs/ui/src/lib/currency-selector/currency-selector.component.ts index 400ccdb35..27bd3ad79 100644 --- a/libs/ui/src/lib/currency-selector/currency-selector.component.ts +++ b/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(); - 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 }) { diff --git a/libs/ui/src/lib/shared/abstract-mat-form-field.ts b/libs/ui/src/lib/shared/abstract-mat-form-field.ts index 2df4e1997..ab24281ac 100644 --- a/libs/ui/src/lib/shared/abstract-mat-form-field.ts +++ b/libs/ui/src/lib/shared/abstract-mat-form-field.ts @@ -169,8 +169,6 @@ export abstract class AbstractMatFormField this.control.enable({ emitEvent: false }); } - this.disabled = isDisabled; - this.stateChanges.next(); } diff --git a/libs/ui/src/lib/symbol-autocomplete/symbol-autocomplete.component.ts b/libs/ui/src/lib/symbol-autocomplete/symbol-autocomplete.component.ts index 704c4ed44..cd7846478 100644 --- a/libs/ui/src/lib/symbol-autocomplete/symbol-autocomplete.component.ts +++ b/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(() => {