92 submission form changing funding to from na breaks submission form in some cases on firefox

src/app/shared/form/builder/ds-dynamic-form-ui/models/array-group/dynamic-form-array.component.html

@@ -13,6 +13,7 @@
              role="group"
              [formGroupName]="groupModel.index"
              [ngClass]="[getClass('element', 'group'), getClass('grid', 'group')]"
+             [class.ds-form-array-group-hidden]="shouldHideGroup(idx)"
              cdkDrag
              [cdkDragDisabled]="dragDisabled"
              [cdkDragPreviewClass]="'ds-submission-reorder-dragging'"
@@ -49,6 +50,10 @@
           <ng-container *ngTemplateOutlet="endTemplate?.templateRef; context: groupModel"></ng-container>
         </div>
       </div>
+      <div *ngIf="model.hideGroupsWhenEmpty && model.groups.length === 1 && shouldHideGroup(0)"
+           class="clearfix w-100">
+        <ng-container *ngTemplateOutlet="endTemplate?.templateRef; context: model.groups[0]"></ng-container>
+      </div>
     </div>
 
 </ng-container>

src/app/shared/form/builder/ds-dynamic-form-ui/models/array-group/dynamic-form-array.component.scss

@@ -59,3 +59,7 @@
     background-color: var(--bs-gray-400);
   }
 }
+
+.ds-form-array-group-hidden {
+  display: none !important;
+}

src/app/shared/form/builder/ds-dynamic-form-ui/models/array-group/dynamic-form-array.component.ts

@@ -260,4 +260,78 @@ export class DsDynamicFormArrayComponent extends DynamicFormArrayComponent {
       }));
     }
   }
+
+  /**
+   * Determines whether a group should be hidden (CSS display:none) in visual-empty state.
+   * Hides the group when hideGroupsWhenEmpty flag is set, it's the first group, it's the only group, and it's empty.
+   *
+   * @param index The group index to check
+   * @returns true if the group should be hidden
+   */
+  shouldHideGroup(index: number): boolean {
+    const hideFlag = this.model.hideGroupsWhenEmpty;
+    const isFirstGroup = index === 0;
+    const isSingleGroup = this.model.groups.length === 1;
+    const isEmpty = this.isGroupEmpty(index);
+
+    const shouldHide = hideFlag && isFirstGroup && isSingleGroup && isEmpty;
+
+    return shouldHide;
+  }
+
+  /**
+   * Check if a specific group in the array is visually empty (all controls have no meaningful values).
+   * Used to determine visual-empty state for conditional hiding.
+   *
+   * @param index The group index to check
+   * @returns true if the group at the given index has all empty controls
+   */
+  isGroupEmpty(index: number): boolean {
+    const formArray = this.control as any;
+    if (!formArray || !formArray.length || index >= formArray.length) {
+      return false;
+    }
+
+    const groupControl = formArray.at(index);
+    if (!groupControl || typeof groupControl.value !== 'object') {
+      return false;
+    }
+
+    const values = groupControl.value;
+    if (!values) {
+      return true;
+    }
+
+    const keys = Object.keys(values);
+    for (const key of keys) {
+      const value = values[key];
+      if (hasValue(value)) {
+        if (typeof value === 'string' && value.trim() !== '') {
+          return false;
+        } else if (typeof value === 'object' && value !== null) {
+          if (Array.isArray(value) && value.length > 0) {
+            return false;
+          } else if (value.hasOwnProperty('value') && value.value && value.value !== '') {
+            return false;
+          } else {
+            const objKeys = Object.keys(value);
+            const hasNonEmptyProp = objKeys.some(objKey => {
+              const propValue = value[objKey];
+              const isNonEmpty = propValue !== null &&
+                                 propValue !== undefined &&
+                                 propValue !== '' &&
+                                 !(Array.isArray(propValue) && propValue.length === 0);
+              return isNonEmpty;
+            });
+            if (hasNonEmptyProp) {
+              return false;
+            }
+          }
+        } else if (typeof value === 'number' || typeof value === 'boolean') {
+          return false;
+        }
+      }
+    }
+    return true;
+  }
 }

src/app/shared/form/builder/ds-dynamic-form-ui/models/ds-dynamic-row-array-model.ts

@@ -18,6 +18,8 @@ export interface DynamicRowArrayModelConfig extends DynamicFormArrayModelConfig
   hasSelectableMetadata: boolean;
   isDraggable: boolean;
   showButtons: boolean;
+  hideGroupsWhenEmpty?: boolean;
+  allowDeleteOnSingleItem?: boolean;
   typeBindRelations?: DynamicFormControlRelation[];
   isInlineGroupArray?: boolean;
 }
@@ -32,6 +34,8 @@ export class DynamicRowArrayModel extends DynamicFormArrayModel {
   @serializable() hasSelectableMetadata: boolean;
   @serializable() isDraggable: boolean;
   @serializable() showButtons = true;
+  @serializable() hideGroupsWhenEmpty = false;
+  @serializable() allowDeleteOnSingleItem = false;
   @serializable() typeBindRelations: DynamicFormControlRelation[];
   isRowArray = true;
   isInlineGroupArray = false;
@@ -47,6 +51,12 @@ export class DynamicRowArrayModel extends DynamicFormArrayModel {
     if (hasValue(config.showButtons)) {
       this.showButtons = config.showButtons;
     }
+    if (hasValue(config.hideGroupsWhenEmpty)) {
+      this.hideGroupsWhenEmpty = config.hideGroupsWhenEmpty;
+    }
+    if (hasValue(config.allowDeleteOnSingleItem)) {
+      this.allowDeleteOnSingleItem = config.allowDeleteOnSingleItem;
+    }
     this.submissionId = config.submissionId;
     this.relationshipConfig = config.relationshipConfig;
     this.metadataKey = config.metadataKey;

src/app/shared/form/builder/ds-dynamic-form-ui/models/sponsor-scrollable-dropdown/dynamic-sponsor-scrollable-dropdown.component.ts

@@ -9,7 +9,6 @@ import { VocabularyService } from '../../../../../../core/submission/vocabularie
 import { FormFieldMetadataValueObject } from '../../../models/form-field-metadata-value.model';
 import { DsDynamicScrollableDropdownComponent } from '../scrollable-dropdown/dynamic-scrollable-dropdown.component';
 import {
-  DYNAMIC_FORM_CONTROL_TYPE_SCROLLABLE_DROPDOWN,
   DynamicScrollableDropdownModel
 } from '../scrollable-dropdown/dynamic-scrollable-dropdown.model';
 import {
@@ -110,12 +109,6 @@ export class DsDynamicSponsorScrollableDropdownComponent extends DsDynamicScroll
         case DYNAMIC_INPUT_TYPE:
           (input as DsDynamicInputModel).value = '';
           break;
-        case DYNAMIC_FORM_CONTROL_TYPE_SCROLLABLE_DROPDOWN:
-          // Remove it only if the funding type is `N/A`
-          if (this.fundingTypeIsNotApplicable(fundingTypeValue)) {
-            (input as DynamicScrollableDropdownModel).value = '';
-          }
-          break;
         default:
           break;
       }

src/app/shared/form/builder/parsers/field-parser.ts

@@ -26,6 +26,7 @@ import { ParserType } from './parser-type';
 import { isNgbDateStruct } from '../../../date.util';
 import { SubmissionScopeType } from '../../../../core/submission/submission-scope-type';
 import { TranslateService } from '@ngx-translate/core';
+import { SPONSOR_METADATA_NAME } from '../ds-dynamic-form-ui/models/ds-dynamic-complex.model';
 
 export const SUBMISSION_ID: InjectionToken<string> = new InjectionToken<string>('submissionId');
 export const CONFIG_DATA: InjectionToken<FormFieldModel> = new InjectionToken<FormFieldModel>('configData');
@@ -88,6 +89,10 @@ export abstract class FieldParser {
         metadataFields: this.getAllFieldIds(),
         hasSelectableMetadata: isNotEmpty(this.configData.selectableMetadata),
         isDraggable,
+        hideGroupsWhenEmpty: this.configData.input.type === ParserType.Complex &&
+                       metadataKey === SPONSOR_METADATA_NAME,
+        allowDeleteOnSingleItem: this.configData.input.type === ParserType.Complex &&
+                           metadataKey === SPONSOR_METADATA_NAME,
         typeBindRelations: isNotEmpty(this.configData.typeBind) ? this.getTypeBindRelations(this.configData.typeBind,
           this.parserOptions.typeField) : null,
         groupFactory: () => {
@@ -246,18 +251,28 @@ export abstract class FieldParser {
 
   protected getInitArrayIndex() {
     const fieldIds: any = this.getAllFieldIds();
-    if (isNotEmpty(this.initFormValues) && isNotNull(fieldIds) && fieldIds.length === 1 && this.initFormValues.hasOwnProperty(fieldIds)) {
-      return this.initFormValues[fieldIds].length;
+
+    if (isNotEmpty(this.initFormValues) && isNotNull(fieldIds) && fieldIds.length === 1) {
+      if (this.initFormValues.hasOwnProperty(fieldIds[0])) {
+        const count = this.initFormValues[fieldIds[0]].length;
+        const result = count === 0 ? 1 : count;
+        return result;
+      } else {
+        const result = 1;
+        return result;
+      }
     } else if (isNotEmpty(this.initFormValues) && isNotNull(fieldIds) && fieldIds.length > 1) {
       let counter = 0;
       fieldIds.forEach((id) => {
         if (this.initFormValues.hasOwnProperty(id)) {
           counter = counter + this.initFormValues[id].length;
         }
       });
-      return (counter === 0) ? 1 : counter;
+      const result = counter === 0 ? 1 : counter;
+      return result;
     } else {
-      return 1;
+      const result = 1;
+      return result;
     }
   }
 

src/app/shared/form/form.component.html

@@ -13,16 +13,16 @@
       (ngbEvent)="onCustomEvent($event)">
       <ng-template modelType="ARRAY" let-group let-index="index" let-context="context">
         <!--Array with repeatable items-->
-        <div *ngIf="(!context.notRepeatable) && !isVirtual(context, index) && group.context.groups.length !== 1 && !isItemReadOnly(context, index)"
+         <div *ngIf="shouldShowDeleteButton(context, index)"
              class="col-xs-2 d-flex flex-column justify-content-sm-start align-items-end">
             <button type="button" class="btn btn-secondary" role="button"
                     title="{{'form.remove' | translate}}"
                     attr.aria-label="{{'form.remove' | translate}}"
-                    (click)="removeItem($event, context, index)">
+                    (click)="handleItemDelete($event, context, index)">
               <span><i class="fas fa-trash" aria-hidden="true"></i></span>
             </button>
         </div>
-        <div *ngIf="(!context.notRepeatable) && index === (group.context.groups.length - 1) && !isItemReadOnly(context, index)" class="clearfix pl-4 w-100">
+        <div *ngIf="(!context.notRepeatable) && index === (group.context.groups.length - 1) && !isItemReadOnly(context, index) && !shouldShowEmptyStateAddButton(context, index)" class="clearfix pl-4 w-100">
           <div class="btn-group" role="group">
             <button type="button" role="button" class="ds-form-add-more btn btn-link"
                     title="{{'form.add' | translate}}"
@@ -33,6 +33,18 @@
           </div>
         </div>
 
+        <div *ngIf="shouldShowEmptyStateAddButton(context, index)"
+            class="clearfix w-100">
+          <div class="btn-group" role="group">
+            <button type="button" role="button" class="ds-form-add-more btn btn-link"
+                    title="{{'form.add-single' | translate}}"
+                    attr.aria-label="{{'form.add-single' | translate}}"
+                    (click)="revealFirstGroup($event, group.context)">
+              <span><i class="fas fa-plus" aria-hidden="true"></i> {{'form.add-single' | translate}}</span>
+            </button>
+          </div>
+        </div>
+
         <!--Array with non repeatable items - Only discard button-->
         <div *ngIf="context.notRepeatable && context.showButtons && group.context.groups.length > 1"
              class="col-xs-2 d-flex flex-column justify-content-sm-start align-items-end">

src/app/shared/form/form.component.spec.ts

@@ -435,6 +435,100 @@ describe('FormComponent test suite', () => {
 
       expect(formComp.removeArrayItem.emit).toHaveBeenCalled();
     }));
+
+    it('revealFirstGroup should set hideGroupsWhenEmpty to false and call formService.changeForm', inject([FormBuilderService], (service: FormBuilderService) => {
+      spyOn((formComp as any).formService, 'changeForm');
+      const arrayModel = formComp.formModel[0] as DynamicFormArrayModel;
+      (arrayModel as any).hideGroupsWhenEmpty = true;
+
+      formComp.revealFirstGroup(new Event('click'), arrayModel);
+
+      expect((arrayModel as any).hideGroupsWhenEmpty).toBe(false);
+      expect((formComp as any).formService.changeForm).toHaveBeenCalledWith(formComp.formId, formComp.formModel);
+    }));
+
+    it('clearItemValues should reset group control and mark as dirty', inject([FormBuilderService], (service: FormBuilderService) => {
+      spyOn(formComp.removeArrayItem, 'emit');
+      spyOn((formComp as any).formService, 'changeForm');
+
+      const arrayModel = formComp.formModel[0] as DynamicFormArrayModel;
+      (arrayModel as any).hideGroupsWhenEmpty = false;
+
+      formComp.clearItemValues(new Event('click'), arrayModel, 0);
+
+      expect((arrayModel as any).hideGroupsWhenEmpty).toBe(true);
+
+      expect((formComp as any).formService.changeForm).toHaveBeenCalledWith(formComp.formId, formComp.formModel);
+
+      expect(formComp.removeArrayItem.emit).toHaveBeenCalled();
+
+      const emittedEvent = (formComp.removeArrayItem.emit as jasmine.Spy).calls.mostRecent().args[0];
+      expect((emittedEvent as any).isClearLastItem).toBe(true);
+    }));
+
+    it('handleItemDelete should call clearItemValues for single-item hideWhenEmpty array', inject([FormBuilderService], (service: FormBuilderService) => {
+      spyOn(formComp, 'clearItemValues');
+      spyOn(formComp, 'removeItem');
+
+      const arrayModel = formComp.formModel[0] as DynamicFormArrayModel;
+      (arrayModel as any).hideGroupsWhenEmpty = true;
+      (arrayModel as any).allowDeleteOnSingleItem = true;
+      while (arrayModel.groups.length > 1) {
+        arrayModel.groups.pop();
+      }
+
+      formComp.handleItemDelete(new Event('click'), arrayModel, 0);
+
+      expect(formComp.clearItemValues).toHaveBeenCalledWith(jasmine.any(Event), arrayModel, 0);
+      expect(formComp.removeItem).not.toHaveBeenCalled();
+    }));
+
+    it('handleItemDelete should call clearItemValues for single-item allowDeleteOnSingleItem array when hideGroupsWhenEmpty is false', inject([FormBuilderService], (service: FormBuilderService) => {
+      spyOn(formComp, 'clearItemValues');
+      spyOn(formComp, 'removeItem');
+
+      const arrayModel = formComp.formModel[0] as DynamicFormArrayModel;
+      (arrayModel as any).allowDeleteOnSingleItem = true;
+      (arrayModel as any).hideGroupsWhenEmpty = false;
+      while (arrayModel.groups.length > 1) {
+        arrayModel.groups.pop();
+      }
+
+      formComp.handleItemDelete(new Event('click'), arrayModel, 0);
+
+      expect(formComp.clearItemValues).toHaveBeenCalledWith(jasmine.any(Event), arrayModel, 0);
+      expect(formComp.removeItem).not.toHaveBeenCalled();
+    }));
+
+    it('handleItemDelete should call removeItem for multi-item array', inject([FormBuilderService], (service: FormBuilderService) => {
+      spyOn(formComp, 'clearItemValues');
+      spyOn(formComp, 'removeItem');
+
+      const arrayModel = formComp.formModel[0] as DynamicFormArrayModel;
+      (arrayModel as any).hideGroupsWhenEmpty = true;
+      // Add multiple groups
+      if (arrayModel.groups.length === 1) {
+        arrayModel.addGroup();
+      }
+
+      formComp.handleItemDelete(new Event('click'), arrayModel, 0);
+
+      expect(formComp.removeItem).toHaveBeenCalledWith(jasmine.any(Event), arrayModel, 0);
+      expect(formComp.clearItemValues).not.toHaveBeenCalled();
+    }));
+
+    it('handleItemDelete should call removeItem when hideGroupsWhenEmpty is false', inject([FormBuilderService], (service: FormBuilderService) => {
+      spyOn(formComp, 'clearItemValues');
+      spyOn(formComp, 'removeItem');
+
+      const arrayModel = formComp.formModel[0] as DynamicFormArrayModel;
+      (arrayModel as any).hideGroupsWhenEmpty = false;
+
+      formComp.handleItemDelete(new Event('click'), arrayModel, 0);
+
+      expect(formComp.removeItem).toHaveBeenCalledWith(jasmine.any(Event), arrayModel, 0);
+      expect(formComp.clearItemValues).not.toHaveBeenCalled();
+    }));
   });
 });