fix issue with aria-expanded attribute that is invalid on input

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

@@ -51,15 +51,18 @@
   <div class="invalid-feedback" *ngIf="searchFailed">Sorry, suggestions could not be loaded.</div>
 </div>
 
-<input *ngIf="(isHierarchicalVocabulary() | async)"
-       class="form-control custom-select"
+<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]="model.readOnly"
+         [readonly]="true"
          [type]="model.inputType"
          [value]="currentValue?.display"
          (focus)="onFocus($event)"
@@ -68,3 +71,4 @@
          (keydown)="$event.preventDefault()"
          (keypress)="$event.preventDefault()"
          (keyup)="$event.preventDefault()">
+</div>

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;
+}