From f97a87702ccfa7f2cb95acb04b1a89a7403ca40f Mon Sep 17 00:00:00 2001
From: Kim Shepherd <kim@shepherd.nz>
Date: Fri, 25 Feb 2022 12:21:22 +1300
Subject: [PATCH] [TLC-254] Hidden fields can collapse in row, revert
 drag-handle problem

apply d-none class to form-control container when model is hidden
css rule for ds-form-control-container.d-none forces collapse
drag-handle fix from 9019b809 was recent and is applied manually here too
---
 .../ds-dynamic-form-ui/ds-dynamic-form.component.html      | 1 +
 .../models/array-group/dynamic-form-array.component.html   | 5 +++--
 .../models/form-group/dynamic-form-group.component.html    | 1 +
 src/styles/_global-styles.scss                             | 7 +++++++
 4 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form.component.html b/src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form.component.html
index 2a18565178..4c1ea2dd96 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form.component.html
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form.component.html
@@ -3,6 +3,7 @@
                                    [group]="formGroup"
                                    [hasErrorMessaging]="model.hasErrorMessages"
                                    [hidden]="model.hidden"
+                                   [class.d-none]="model.hidden"
                                    [layout]="formLayout"
                                    [model]="model"
                                    [templates]="templates"
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/array-group/dynamic-form-array.component.html b/src/app/shared/form/builder/ds-dynamic-form-ui/models/array-group/dynamic-form-array.component.html
index 29df7a34c4..d518d59da2 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/array-group/dynamic-form-array.component.html
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/array-group/dynamic-form-array.component.html
@@ -17,8 +17,8 @@
              [cdkDragPreviewClass]="'ds-submission-reorder-dragging'"
              [class.grey-background]="model.isInlineGroupArray">
           <!-- Item content -->
-          <div class="drag-handle" [class.invisible]="dragDisabled" tabindex="0">
-            <i class="drag-icon fas fa-grip-vertical fa-fw"  ></i>
+          <div class="drag-handle" [class.drag-disable]="dragDisabled" tabindex="0">
+            <i class="drag-icon fas fa-grip-vertical fa-fw" [class.drag-disable]="dragDisabled" ></i>
           </div>
           <ng-container *ngTemplateOutlet="startTemplate?.templateRef; context: groupModel"></ng-container>
           <ds-dynamic-form-control-container *ngFor="let _model of groupModel.group"
@@ -28,6 +28,7 @@
                                              [context]="groupModel"
                                              [group]="control.get([idx])"
                                              [hidden]="_model.hidden"
+                                             [class.d-none]="_model.hidden"
                                              [layout]="formLayout"
                                              [model]="_model"
                                              [templates]="templates"
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/form-group/dynamic-form-group.component.html b/src/app/shared/form/builder/ds-dynamic-form-ui/models/form-group/dynamic-form-group.component.html
index 933590b459..8e1645633e 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/form-group/dynamic-form-group.component.html
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/form-group/dynamic-form-group.component.html
@@ -11,6 +11,7 @@
                                        [group]="control"
                                        [hasErrorMessaging]="model.hasErrorMessages"
                                        [hidden]="_model.hidden"
+                                        [class.d-none]="_model.hidden"
                                        [layout]="formLayout"
                                        [model]="_model"
                                        [templates]="templates"
diff --git a/src/styles/_global-styles.scss b/src/styles/_global-styles.scss
index 4afd2eb05e..4a855a635e 100644
--- a/src/styles/_global-styles.scss
+++ b/src/styles/_global-styles.scss
@@ -108,3 +108,10 @@ ngb-modal-backdrop {
 .ml-gap {
   margin-left: var(--ds-gap);
 }
+
+ds-dynamic-form-control-container.d-none {
+  /* Ensures that form-control containers hidden and disabled by type binding collapse and let other fields in
+     the same row expand accordingly
+   */
+  visibility: collapse;
+}