From d30fdb1db7e2c26f87713fa12877b3fa8fb8636c Mon Sep 17 00:00:00 2001
From: Giuseppe Digilio <giuseppe.digilio@4science.it>
Date: Thu, 8 Jul 2021 20:19:07 +0200
Subject: [PATCH] fix issue with aria-expanded attribute that is invalid on
 input

---
 .../onebox/dynamic-onebox.component.html      | 38 ++++++++++---------
 .../onebox/dynamic-onebox.component.scss      | 10 +++++
 2 files changed, 31 insertions(+), 17 deletions(-)

diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/onebox/dynamic-onebox.component.html b/src/app/shared/form/builder/ds-dynamic-form-ui/models/onebox/dynamic-onebox.component.html
index 6b3c64d59c..499455255b 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/onebox/dynamic-onebox.component.html
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/onebox/dynamic-onebox.component.html
@@ -51,20 +51,24 @@
   <div class="invalid-feedback" *ngIf="searchFailed">Sorry, suggestions could not be loaded.</div>
 </div>
 
-<input *ngIf="(isHierarchicalVocabulary() | async)"
-       class="form-control custom-select"
-       [attr.aria-labelledby]="'label_' + model.id"
-       [attr.autoComplete]="model.autoComplete"
-       [class.is-invalid]="showErrorMessages"
-       [id]="id"
-       [name]="model.name"
-       [placeholder]="model.placeholder"
-       [readonly]="model.readOnly"
-       [type]="model.inputType"
-       [value]="currentValue?.display"
-       (focus)="onFocus($event)"
-       (change)="onChange($event)"
-       (click)="openTree($event)"
-       (keydown)="$event.preventDefault()"
-       (keypress)="$event.preventDefault()"
-       (keyup)="$event.preventDefault()">
+<div *ngIf="(isHierarchicalVocabulary() | async)" class="position-relative right-addon">
+  <i ngbDropdownToggle class="position-absolute tree-toggle"
+     aria-hidden="true"></i>
+  <input class="form-control"
+         [attr.aria-labelledby]="'label_' + model.id"
+         [attr.autoComplete]="model.autoComplete"
+         [class.is-invalid]="showErrorMessages"
+         [class.tree-input]="!model.readOnly"
+         [id]="id"
+         [name]="model.name"
+         [placeholder]="model.placeholder"
+         [readonly]="true"
+         [type]="model.inputType"
+         [value]="currentValue?.display"
+         (focus)="onFocus($event)"
+         (change)="onChange($event)"
+         (click)="openTree($event)"
+         (keydown)="$event.preventDefault()"
+         (keypress)="$event.preventDefault()"
+         (keyup)="$event.preventDefault()">
+</div>
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/onebox/dynamic-onebox.component.scss b/src/app/shared/form/builder/ds-dynamic-form-ui/models/onebox/dynamic-onebox.component.scss
index e4a5a64ea3..ac329255d5 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/onebox/dynamic-onebox.component.scss
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/onebox/dynamic-onebox.component.scss
@@ -1,3 +1,5 @@
+@import '../../../../form.component';
+
 :host ::ng-deep .dropdown-menu {
   width: 100% !important;
   max-height: var(--ds-dropdown-menu-max-height);
@@ -21,3 +23,11 @@
   max-height: 85vh !important;
   overflow-y: auto;
 }
+
+.tree-toggle {
+  padding:  0.70rem 0.70rem 0 0.70rem ;
+}
+
+.tree-input[readonly]{
+  background-color: #fff;
+}