Merge pull request #2073 from fecgov/feature/1493

Feature/1493 - Fixed issues with form submission not working without blur. And fixed issue with currency input breaking.

front-end/cypress/e2e/pages/f3xCashOnHandPage.ts

@@ -12,7 +12,7 @@ export const defaultFormData: F3xCashOnHandFormData = {
 
 export class F3xCashOnHandPage {
   static enterFormData(formData: F3xCashOnHandFormData) {
-    cy.get('p-inputnumber[formcontrolname="L6a_cash_on_hand_jan_1_ytd"]').safeType(formData['cashOnHand']);
+    cy.get('app-input-number[formcontrolname="L6a_cash_on_hand_jan_1_ytd"]').safeType(formData['cashOnHand']);
     PageUtils.calendarSetValue('p-calendar[formcontrolname="cash_on_hand_date"]', formData['date']);
   }
 }

front-end/src/app/layout/feedback-overlay/feedback-overlay.component.ts

@@ -3,6 +3,7 @@ import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { Store } from '@ngrx/store';
 import { Feedback } from 'app/shared/models/feedback.model';
 import { FeedbackService } from 'app/shared/services/feedback.service';
+import { blurActiveInput } from 'app/shared/utils/form.utils';
 import { singleClickEnableAction } from 'app/store/single-click.actions';
 import { OverlayPanel } from 'primeng/overlaypanel';
 
@@ -47,6 +48,7 @@ export class FeedbackOverlayComponent {
 
   save() {
     this.formSubmitted = true;
+    blurActiveInput(this.form);
     if (this.form.invalid) {
       this.store.dispatch(singleClickEnableAction());
       return;

front-end/src/app/login/debug-login/debug-login.component.html

@@ -5,26 +5,12 @@ <h3>Debug Login Form</h3>
   <div class="col-12">
     <form [formGroup]="form" (ngSubmit)="doSignIn()">
       <span class="field login-field p-float-label">
-        <input
-          pInputText
-          id="emailId"
-          name="emailId"
-          type="text"
-          formControlName="emailId"
-          (keydown.enter)="doSignIn()"
-        />
+        <input pInputText id="emailId" name="emailId" type="text" formControlName="emailId" />
         <label class="p-float-label" for="emailId">Email</label>
         <app-error-messages [form]="form" fieldName="emailId"></app-error-messages>
       </span>
       <span class="field login-field p-float-label">
-        <input
-          pInputText
-          id="committeeId"
-          name="committeeId"
-          type="text"
-          formControlName="committeeId"
-          (keydown.enter)="doSignIn()"
-        />
+        <input pInputText id="committeeId" name="committeeId" type="text" formControlName="committeeId" />
         <label for="committeeId">Committee ID</label>
         <app-error-messages
           [form]="form"
@@ -40,7 +26,6 @@ <h3>Debug Login Form</h3>
           formControlName="loginPassword"
           [feedback]="false"
           [toggleMask]="true"
-          (keydown.enter)="doSignIn()"
         />
         <label for="loginPassword">Password</label>
         <app-error-messages [form]="form" fieldName="loginPassword"></app-error-messages>

front-end/src/app/login/debug-login/debug-login.component.ts

@@ -3,6 +3,7 @@ import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { Router } from '@angular/router';
 import { committeeIdValidator, emailValidator } from 'app/shared/utils/validators.utils';
 import { LoginService } from '../../shared/services/login.service';
+import { blurActiveInput } from 'app/shared/utils/form.utils';
 
 @Component({
   selector: 'app-debug-login',
@@ -29,6 +30,7 @@ export class DebugLoginComponent {
    *
    */
   public doSignIn(): void {
+    blurActiveInput(this.form);
     if (this.form.invalid) {
       return;
     }

front-end/src/app/login/security-notice/security-notice.component.ts

@@ -7,6 +7,7 @@ import { UserLoginData } from 'app/shared/models/user.model';
 import { LoginService } from 'app/shared/services/login.service';
 import { UsersService } from 'app/shared/services/users.service';
 import { DateUtils } from 'app/shared/utils/date.utils';
+import { blurActiveInput } from 'app/shared/utils/form.utils';
 import { singleClickEnableAction } from 'app/store/single-click.actions';
 import { userLoginDataUpdatedAction } from 'app/store/user-login-data.actions';
 import { selectUserLoginData } from 'app/store/user-login-data.selectors';
@@ -49,6 +50,7 @@ export class SecurityNoticeComponent extends DestroyerComponent implements OnIni
 
   signConsentForm() {
     this.formSubmitted = true;
+    blurActiveInput(this.form);
     if (this.form.invalid || !this.userLoginData) {
       this.store.dispatch(singleClickEnableAction());
       return;

front-end/src/app/reports/f1m/main-form/main-form.component.ts

@@ -16,6 +16,7 @@ import { selectActiveReport } from 'app/store/active-report.selectors';
 import { singleClickEnableAction } from 'app/store/single-click.actions';
 import { TransactionContactUtils } from 'app/shared/components/transaction-type-base/transaction-contact.utils';
 import { AffiliatedContact, CandidateContact, F1MCandidateTag, f1mCandidateTags, F1MContact } from './contact';
+import { blurActiveInput } from 'app/shared/utils/form.utils';
 
 @Component({
   selector: 'app-main-form',
@@ -228,7 +229,7 @@ export class MainFormComponent extends MainFormBaseComponent implements OnInit {
 
   public override save(jump: 'continue' | undefined = undefined) {
     this.formSubmitted = true;
-
+    blurActiveInput(this.form);
     if (this.form.invalid) {
       this.store.dispatch(singleClickEnableAction());
       return;

front-end/src/app/reports/f3x/create-workflow/cash-on-hand.component.html

@@ -12,13 +12,10 @@ <h5>
         <div class="col-6">
           <div class="field">
             <label for="L6a_cash_on_hand_jan_1_ytd">BEGINNING CASH ON HAND</label>
-            <p-inputNumber
+            <app-input-number
               inputId="L6a_cash_on_hand_jan_1_ytd"
               formControlName="L6a_cash_on_hand_jan_1_ytd"
-              mode="currency"
-              currency="USD"
-              locale="en-US"
-            ></p-inputNumber>
+            ></app-input-number>
             <app-error-messages
               [form]="form"
               fieldName="L6a_cash_on_hand_jan_1_ytd"

front-end/src/app/reports/f3x/create-workflow/cash-on-hand.component.ts

@@ -11,6 +11,7 @@ import { schema as f3xSchema } from 'fecfile-validate/fecfile_validate_js/dist/F
 import { MessageService } from 'primeng/api';
 import { takeUntil } from 'rxjs';
 import { singleClickEnableAction } from '../../../store/single-click.actions';
+import { blurActiveInput } from 'app/shared/utils/form.utils';
 
 @Component({
   selector: 'app-cash-on-hand',
@@ -48,6 +49,7 @@ export class CashOnHandComponent extends DestroyerComponent implements OnInit {
 
   public save(): void {
     this.formSubmitted = true;
+    blurActiveInput(this.form);
     if (this.form.invalid) {
       this.store.dispatch(singleClickEnableAction());
       return;

front-end/src/app/reports/f3x/create-workflow/create-f3x-step1.component.ts

@@ -25,6 +25,7 @@ import { DestroyerComponent } from 'app/shared/components/app-destroyer.componen
 import { singleClickEnableAction } from '../../../store/single-click.actions';
 import { buildAfterDateValidator, buildNonOverlappingCoverageValidator } from 'app/shared/utils/validators.utils';
 import { CommitteeAccount } from 'app/shared/models/committee-account.model';
+import { blurActiveInput } from 'app/shared/utils/form.utils';
 
 @Component({
   selector: 'app-create-f3x-step1',
@@ -44,7 +45,9 @@ export class CreateF3XStep1Component extends DestroyerComponent implements OnIni
   userCanSetFilingFrequency: boolean = environment.userCanSetFilingFrequency;
   stateOptions: PrimeOptions = [];
   formSubmitted = false;
-  form: FormGroup = this.fb.group(SchemaUtils.getFormGroupFields(this.formProperties));
+  form: FormGroup = this.fb.group(SchemaUtils.getFormGroupFieldsNoBlur(this.formProperties, this.fb), {
+    updateOn: 'blur',
+  });
 
   readonly F3xReportTypeCategories = F3xReportTypeCategories;
   public existingCoverage: F3xCoverageDates[] | undefined;
@@ -180,6 +183,7 @@ export class CreateF3XStep1Component extends DestroyerComponent implements OnIni
 
   public async save(jump: 'continue' | undefined = undefined) {
     this.formSubmitted = true;
+    blurActiveInput(this.form);
     if (this.form.invalid) {
       this.store.dispatch(singleClickEnableAction());
       return;

front-end/src/app/reports/shared/main-form-base.component.ts

@@ -13,6 +13,7 @@ import { Report } from 'app/shared/models/report.model';
 import { singleClickEnableAction } from 'app/store/single-click.actions';
 import { ReportService } from 'app/shared/services/report.service';
 import { JsonSchema } from 'app/shared/interfaces/json-schema.interface';
+import { blurActiveInput } from 'app/shared/utils/form.utils';
 
 @Component({
   template: '',
@@ -40,7 +41,9 @@ export abstract class MainFormBaseComponent extends DestroyerComponent implement
 
   ngOnInit(): void {
     this.reportId = this.activatedRoute.snapshot.params['reportId'];
-    this.form = this.fb.group(SchemaUtils.getFormGroupFields(this.formProperties));
+    this.form = this.fb.group(SchemaUtils.getFormGroupFieldsNoBlur(this.formProperties, this.fb), {
+      updateOn: 'blur',
+    });
     const activeReport$ = this.store.select(selectActiveReport).pipe(takeUntil(this.destroy$));
     const committeeAccount$ = this.store.select(selectCommitteeAccount).pipe(takeUntil(this.destroy$));
 
@@ -72,7 +75,7 @@ export abstract class MainFormBaseComponent extends DestroyerComponent implement
 
   public save(jump: 'continue' | undefined = undefined) {
     this.formSubmitted = true;
-
+    blurActiveInput(this.form);
     if (this.form.invalid) {
       this.store.dispatch(singleClickEnableAction());
       return;

front-end/src/app/reports/submission-workflow/submit-report-step1.component.ts

@@ -6,6 +6,7 @@ import { DestroyerComponent } from 'app/shared/components/app-destroyer.componen
 import { CommitteeAccount } from 'app/shared/models/committee-account.model';
 import { Report } from 'app/shared/models/report.model';
 import { getReportFromJSON, ReportService } from 'app/shared/services/report.service';
+import { blurActiveInput } from 'app/shared/utils/form.utils';
 import { CountryCodeLabels, LabelUtils, PrimeOptions, StatesCodeLabels } from 'app/shared/utils/label.utils';
 import { SchemaUtils } from 'app/shared/utils/schema.utils';
 import { buildGuaranteeUniqueValuesValidator, emailValidator } from 'app/shared/utils/validators.utils';
@@ -34,7 +35,9 @@ export class SubmitReportStep1Component extends DestroyerComponent implements On
   stateOptions: PrimeOptions = [];
   countryOptions: PrimeOptions = [];
   formSubmitted = false;
-  form: FormGroup = this.fb.group(SchemaUtils.getFormGroupFields(this.formProperties));
+  form: FormGroup = this.fb.group(SchemaUtils.getFormGroupFieldsNoBlur(this.formProperties, this.fb), {
+    updateOn: 'blur',
+  });
   getBackUrl?: (report?: Report) => string;
   getContinueUrl?: (report?: Report) => string;
 
@@ -93,6 +96,7 @@ export class SubmitReportStep1Component extends DestroyerComponent implements On
 
   public async continue(): Promise<void> {
     this.formSubmitted = true;
+    blurActiveInput(this.form);
     if (this.form.invalid || this.report == undefined) {
       this.store.dispatch(singleClickEnableAction());
       return;

front-end/src/app/reports/submission-workflow/submit-report-step2.component.ts

@@ -9,6 +9,7 @@ import { Report } from 'app/shared/models/report.model';
 import { ApiService } from 'app/shared/services/api.service';
 import { Form3XService } from 'app/shared/services/form-3x.service';
 import { getReportFromJSON, ReportService } from 'app/shared/services/report.service';
+import { blurActiveInput } from 'app/shared/utils/form.utils';
 import { SchemaUtils } from 'app/shared/utils/schema.utils';
 import { passwordValidator } from 'app/shared/utils/validators.utils';
 import { selectActiveReport } from 'app/store/active-report.selectors';
@@ -103,6 +104,7 @@ export class SubmitReportStep2Component extends DestroyerComponent implements On
 
   public submitClicked(): void {
     this.formSubmitted = true;
+    blurActiveInput(this.form);
     if (this.form.invalid) {
       return;
     }

front-end/src/app/shared/components/contact-dialog/contact-dialog.component.ts

@@ -32,6 +32,7 @@ import { TableLazyLoadEvent } from 'primeng/table';
 import { getReportFromJSON } from '../../services/report.service';
 import { ReportTypes } from 'app/shared/models/report.model';
 import { QueryParams } from 'app/shared/services/api.service';
+import { blurActiveInput } from 'app/shared/utils/form.utils';
 
 export class TransactionData {
   id: string;
@@ -356,7 +357,7 @@ export class ContactDialogComponent extends DestroyerComponent implements OnInit
 
   public saveContact(closeDialog = true) {
     this.formSubmitted = true;
-
+    blurActiveInput(this.form);
     if (this.form.invalid) {
       return;
     }

front-end/src/app/shared/components/contact-lookup/contact-lookup.component.spec.ts

@@ -106,7 +106,7 @@ describe('ContactLookupComponent', () => {
         ];
         spyOn(testContactService, 'candidateLookup').and.returnValue(Promise.resolve(testCandidateLookupResponse));
         const testEvent = { query: 'hi' };
-        component.contactTypeFormControl.setValue('CAN');
+        component.contactTypeFormControl.setValue(ContactTypes.CANDIDATE);
         component.onDropdownSearch(testEvent);
         tick(500);
         expect(component.contactLookupList[1].items.length === 0).toBeTrue();
@@ -115,7 +115,7 @@ describe('ContactLookupComponent', () => {
       it('#onDropdownSearch CAN undefined fecfile_candidates', fakeAsync(() => {
         spyOn(testContactService, 'candidateLookup').and.returnValue(Promise.resolve(testCandidateLookupResponse));
         const testEvent = { query: 'hi' };
-        component.contactTypeFormControl.setValue('CAN');
+        component.contactTypeFormControl.setValue(ContactTypes.CANDIDATE);
         component.onDropdownSearch(testEvent);
         tick(500);
         expect(component.contactLookupList[0].items.length === 0).toBeTrue();
@@ -132,7 +132,7 @@ describe('ContactLookupComponent', () => {
         ];
         spyOn(testContactService, 'candidateLookup').and.returnValue(Promise.resolve(testCandidateLookupResponse));
         const testEvent = { query: 'hi' };
-        component.contactTypeFormControl.setValue('CAN');
+        component.contactTypeFormControl.setValue(ContactTypes.CANDIDATE);
         component.onDropdownSearch(testEvent);
         tick(500);
         expect(
@@ -163,7 +163,7 @@ describe('ContactLookupComponent', () => {
         ];
         spyOn(testContactService, 'committeeLookup').and.returnValue(of(testCommitteeLookupResponse));
         const testEvent = { query: 'hi' };
-        component.contactTypeFormControl.setValue('COM');
+        component.contactTypeFormControl.setValue(ContactTypes.COMMITTEE);
         component.onDropdownSearch(testEvent);
         expect(component.contactLookupList[1].items.length === 0).toBeTrue();
       }));
@@ -178,7 +178,7 @@ describe('ContactLookupComponent', () => {
         ];
         spyOn(testContactService, 'committeeLookup').and.returnValue(of(testCommitteeLookupResponse));
         const testEvent = { query: 'hi' };
-        component.contactTypeFormControl.setValue('COM');
+        component.contactTypeFormControl.setValue(ContactTypes.COMMITTEE);
         component.onDropdownSearch(testEvent);
         expect(component.contactLookupList[0].items.length === 0).toBeTrue();
       }));
@@ -199,7 +199,7 @@ describe('ContactLookupComponent', () => {
         ];
         spyOn(testContactService, 'committeeLookup').and.returnValue(of(testCommitteeLookupResponse));
         const testEvent = { query: 'hi' };
-        component.contactTypeFormControl.setValue('COM');
+        component.contactTypeFormControl.setValue(ContactTypes.COMMITTEE);
         component.onDropdownSearch(testEvent);
         expect(
           JSON.stringify(component.contactLookupList) ===
@@ -223,7 +223,7 @@ describe('ContactLookupComponent', () => {
       it('#onDropdownSearch IND undefined fecfile_individuals', fakeAsync(() => {
         spyOn(testContactService, 'individualLookup').and.returnValue(of(testIndividualLookupResponse));
         const testEvent = { query: 'hi' };
-        component.contactTypeFormControl.setValue('IND');
+        component.contactTypeFormControl.setValue(ContactTypes.INDIVIDUAL);
         component.onDropdownSearch(testEvent);
         tick(500);
         expect(component.contactLookupList[0].items.length === 0).toBeTrue();
@@ -240,7 +240,7 @@ describe('ContactLookupComponent', () => {
         ];
         spyOn(testContactService, 'individualLookup').and.returnValue(of(testIndividualLookupResponse));
         const testEvent = { query: 'hi' };
-        component.contactTypeFormControl.setValue('IND');
+        component.contactTypeFormControl.setValue(ContactTypes.INDIVIDUAL);
         component.onDropdownSearch(testEvent);
         tick(500);
         expect(
@@ -267,7 +267,7 @@ describe('ContactLookupComponent', () => {
       it('#onDropdownSearch ORG undefined fecfile_organizations', fakeAsync(() => {
         spyOn(testContactService, 'organizationLookup').and.returnValue(of(testOrganizationLookupResponse));
         const testEvent = { query: 'hi' };
-        component.contactTypeFormControl.setValue('ORG');
+        component.contactTypeFormControl.setValue(ContactTypes.ORGANIZATION);
         component.onDropdownSearch(testEvent);
         tick(500);
         expect(component.contactLookupList[0].items.length === 0).toBeTrue();
@@ -283,7 +283,7 @@ describe('ContactLookupComponent', () => {
         ];
         spyOn(testContactService, 'organizationLookup').and.returnValue(of(testOrganizationLookupResponse));
         const testEvent = { query: 'hi' };
-        component.contactTypeFormControl.setValue('ORG');
+        component.contactTypeFormControl.setValue(ContactTypes.ORGANIZATION);
         component.onDropdownSearch(testEvent);
         tick(500);
         expect(

front-end/src/app/shared/components/contact-lookup/contact-lookup.component.ts

@@ -57,8 +57,8 @@ export class ContactLookupComponent extends DestroyerComponent implements OnInit
   contactTypeLabels: LabelList = ContactTypeLabels;
   candidateOfficeLabel?: string;
 
-  contactTypeFormControl = new FormControl();
-  searchBoxFormControl = new FormControl();
+  contactTypeFormControl = new FormControl<ContactTypes | null>(null, { updateOn: 'change' });
+  searchBoxFormControl = new FormControl('', { updateOn: 'change' });
 
   searchTerm = '';
 
@@ -77,10 +77,13 @@ export class ContactLookupComponent extends DestroyerComponent implements OnInit
       this.candidateOfficeLabel = LabelUtils.get(CandidateOfficeTypeLabels, this.candidateOffice);
     }
 
-    this.contactTypeFormControl.valueChanges.pipe(takeUntil(this.destroy$)).subscribe((contactType: ContactTypes) => {
-      this.contactType = contactType;
-      this.contactTypeSelect.emit(contactType);
-    });
+    this.contactTypeFormControl.valueChanges
+      .pipe(takeUntil(this.destroy$))
+      .subscribe((contactType: ContactTypes | null) => {
+        if (!contactType) return;
+        this.contactType = contactType;
+        this.contactTypeSelect.emit(contactType);
+      });
   }
 
   // eslint-disable-next-line @typescript-eslint/no-explicit-any