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,15 +51,18 @@
<div class="invalid-feedback" *ngIf="searchFailed">Sorry, suggestions could not be loaded.</div> <div class="invalid-feedback" *ngIf="searchFailed">Sorry, suggestions could not be loaded.</div>
</div> </div>
<input *ngIf="(isHierarchicalVocabulary() | async)" <div *ngIf="(isHierarchicalVocabulary() | async)" class="position-relative right-addon">
class="form-control custom-select" <i ngbDropdownToggle class="position-absolute tree-toggle"
aria-hidden="true"></i>
<input class="form-control"
[attr.aria-labelledby]="'label_' + model.id" [attr.aria-labelledby]="'label_' + model.id"
[attr.autoComplete]="model.autoComplete" [attr.autoComplete]="model.autoComplete"
[class.is-invalid]="showErrorMessages" [class.is-invalid]="showErrorMessages"
[class.tree-input]="!model.readOnly"
[id]="id" [id]="id"
[name]="model.name" [name]="model.name"
[placeholder]="model.placeholder" [placeholder]="model.placeholder"
[readonly]="model.readOnly" [readonly]="true"
[type]="model.inputType" [type]="model.inputType"
[value]="currentValue?.display" [value]="currentValue?.display"
(focus)="onFocus($event)" (focus)="onFocus($event)"
@@ -68,3 +71,4 @@
(keydown)="$event.preventDefault()" (keydown)="$event.preventDefault()"
(keypress)="$event.preventDefault()" (keypress)="$event.preventDefault()"
(keyup)="$event.preventDefault()"> (keyup)="$event.preventDefault()">
</div>

View File

@@ -1,3 +1,5 @@
@import '../../../../form.component';
:host ::ng-deep .dropdown-menu { :host ::ng-deep .dropdown-menu {
width: 100% !important; width: 100% !important;
max-height: var(--ds-dropdown-menu-max-height); max-height: var(--ds-dropdown-menu-max-height);
@@ -21,3 +23,11 @@
max-height: 85vh !important; max-height: 85vh !important;
overflow-y: auto; overflow-y: auto;
} }
.tree-toggle {
padding: 0.70rem 0.70rem 0 0.70rem ;
}
.tree-input[readonly]{
background-color: #fff;
}