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

This commit is contained in:
Giuseppe Digilio
2021-07-08 20:19:07 +02:00
parent eae89e1be0
commit d30fdb1db7
2 changed files with 31 additions and 17 deletions

View File

@@ -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>

View File

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