From 28707f9a4cec29c6f3e2e6ea7cdecfa2b4f9cdf0 Mon Sep 17 00:00:00 2001
From: Giuseppe Digilio <giuseppe.digilio@4science.it>
Date: Thu, 8 Jul 2021 20:33:43 +0200
Subject: [PATCH] fix issue with misaligned loading icon on tag field

---
 .../models/tag/dynamic-tag.component.html     | 53 +++++++++----------
 .../models/tag/dynamic-tag.component.scss     |  7 +--
 2 files changed, 28 insertions(+), 32 deletions(-)

diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/tag/dynamic-tag.component.html b/src/app/shared/form/builder/ds-dynamic-form-ui/models/tag/dynamic-tag.component.html
index b4605f2ac4..0cbd518595 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/tag/dynamic-tag.component.html
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/tag/dynamic-tag.component.html
@@ -21,33 +21,32 @@
          (keydown)="preventEventsPropagation($event)"
          (keyup)="onKeyUp($event)" />
 
-
-  <input *ngIf="model.hasAuthority"
-         class="border-0 form-control-plaintext tag-input flex-grow-1 mt-1 mb-1"
-         type="text"
-         role="textbox"
-         [attr.aria-labelledby]="'label_' + model.id"
-         [(ngModel)]="currentValue"
-         [attr.autoComplete]="model.autoComplete"
-         [class.is-invalid]="showErrorMessages"
-         [class.pl-3]="chips.hasItems()"
-         [id]="id"
-         [inputFormatter]="formatter"
-         [name]="model.name"
-         [ngbTypeahead]="search"
-         [placeholder]="model.placeholder"
-         [readonly]="model.readOnly"
-         [resultTemplate]="rt"
-         [type]="model.inputType"
-         (blur)="onBlur($event)"
-         (focus)="onFocus($event)"
-         (change)="$event.stopPropagation()"
-         (input)="onInput($event)"
-         (selectItem)="onSelectItem($event)"
-         (keypress)="preventEventsPropagation($event)"
-         (keydown)="preventEventsPropagation($event)"
-         (keyup)="onKeyUp($event)"
-         #instance="ngbTypeahead"/>
+  <div *ngIf="model.hasAuthority" class="position-relative right-addon">
     <i *ngIf="searching" class="fas fa-circle-notch fa-spin fa-2x fa-fw text-primary position-absolute mt-1 p-0" aria-hidden="true"></i>
+    <input class="border-0 form-control-plaintext tag-input flex-grow-1 mt-1 mb-1"
+           type="text"
+           [attr.aria-labelledby]="'label_' + model.id"
+           [(ngModel)]="currentValue"
+           [attr.autoComplete]="model.autoComplete"
+           [class.is-invalid]="showErrorMessages"
+           [class.pl-3]="chips.hasItems()"
+           [id]="id"
+           [inputFormatter]="formatter"
+           [name]="model.name"
+           [ngbTypeahead]="search"
+           [placeholder]="model.placeholder"
+           [readonly]="model.readOnly"
+           [resultTemplate]="rt"
+           [type]="model.inputType"
+           (blur)="onBlur($event)"
+           (focus)="onFocus($event)"
+           (change)="$event.stopPropagation()"
+           (input)="onInput($event)"
+           (selectItem)="onSelectItem($event)"
+           (keypress)="preventEventsPropagation($event)"
+           (keydown)="preventEventsPropagation($event)"
+           (keyup)="onKeyUp($event)"
+           #instance="ngbTypeahead"/>
+    </div>
   </ds-chips>
 
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/tag/dynamic-tag.component.scss b/src/app/shared/form/builder/ds-dynamic-form-ui/models/tag/dynamic-tag.component.scss
index e87b8ffdb4..7a8040ccb1 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/tag/dynamic-tag.component.scss
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/tag/dynamic-tag.component.scss
@@ -1,8 +1,5 @@
-/* style fa-spin */
-.fa-spin {
-  pointer-events: none;
-  right: 0;
-}
+@import '../../../../form.component';
+
 .chips-left {
   left: 0;
   padding-right: 100%;