Fix keyup vs down bug
This commit is contained in:
shamoon
@@ -1,65 +1,65 @@
|
||||
|
||||
<div ngbDropdown #resultsDropdown="ngbDropdown" (openChange)="onDropdownOpenChange">
|
||||
<form class="form-inline position-relative">
|
||||
<i-bs width="1em" height="1em" name="search"></i-bs>
|
||||
<input #searchInput class="form-control form-control-sm" type="text" name="query"
|
||||
autocomplete="off" placeholder="Search" aria-label="Search" i18n-placeholder
|
||||
[(ngModel)]="query" (ngModelChange)="this.queryDebounce.next($event)" (keyup)="searchInputKeyDown($event)" ngbDropdownAnchor>
|
||||
<div class="position-absolute top-50 end-0 translate-middle">
|
||||
<span class="badge d-none d-lg-inline text-muted position-absolute top-50 start-100 translate-middle ms-n4 fw-normal">⌘K</span>
|
||||
@if (loading) {
|
||||
<div class="spinner-border spinner-border-sm text-muted mt-1"></div>
|
||||
}
|
||||
</div>
|
||||
|
||||
</form>
|
||||
|
||||
<ng-template #resultItemTemplate let-item="item" let-nameProp="nameProp" let-type="type" let-icon="icon" let-date="date">
|
||||
<div #resultItem ngbDropdownItem class="py-2 d-flex align-items-center focus-ring border-0 cursor-pointer" tabindex="-1"
|
||||
(click)="primaryAction(type, item)"
|
||||
(mouseenter)="onItemHover($event)">
|
||||
<i-bs width="1.2em" height="1.2em" name="{{icon}}" class="me-2 text-muted"></i-bs>
|
||||
<div class="text-truncate">
|
||||
{{item[nameProp]}}
|
||||
@if (date) {
|
||||
<small class="small text-muted">{{date | customDate}}</small>
|
||||
<form class="form-inline position-relative">
|
||||
<i-bs width="1em" height="1em" name="search"></i-bs>
|
||||
<input #searchInput class="form-control form-control-sm" type="text" name="query"
|
||||
autocomplete="off" placeholder="Search" aria-label="Search" i18n-placeholder
|
||||
[(ngModel)]="query" (ngModelChange)="this.queryDebounce.next($event)" (keydown)="searchInputKeyDown($event)" ngbDropdownAnchor>
|
||||
<div class="position-absolute top-50 end-0 translate-middle">
|
||||
<span class="badge d-none d-lg-inline text-muted position-absolute top-50 start-100 translate-middle ms-n4 fw-normal">⌘K</span>
|
||||
@if (loading) {
|
||||
<div class="spinner-border spinner-border-sm text-muted mt-1"></div>
|
||||
}
|
||||
</div>
|
||||
<div class="btn-group ms-auto">
|
||||
<button #primaryButton type="button" class="btn btn-sm btn-outline-primary d-flex"
|
||||
(click)="primaryAction(type, item); $event.stopPropagation()"
|
||||
[disabled]="disablePrimaryButton(type, item)"
|
||||
(mouseenter)="onButtonHover($event)">
|
||||
@if (type === DataType.Document) {
|
||||
<i-bs width="1em" height="1em" name="pencil"></i-bs>
|
||||
<span> <ng-container i18n>Open</ng-container></span>
|
||||
} @else if (type === DataType.Workflow || type === DataType.CustomField || type === DataType.Group || type === DataType.User || type === DataType.MailAccount || type === DataType.MailRule) {
|
||||
<i-bs width="1em" height="1em" name="pencil"></i-bs>
|
||||
<span> <ng-container i18n>Edit</ng-container></span>
|
||||
} @else {
|
||||
<i-bs width="1em" height="1em" name="filter"></i-bs>
|
||||
<span> <ng-container i18n>Filter documents</ng-container></span>
|
||||
|
||||
</form>
|
||||
|
||||
<ng-template #resultItemTemplate let-item="item" let-nameProp="nameProp" let-type="type" let-icon="icon" let-date="date">
|
||||
<div #resultItem ngbDropdownItem class="py-2 d-flex align-items-center focus-ring border-0 cursor-pointer" tabindex="-1"
|
||||
(click)="primaryAction(type, item)"
|
||||
(mouseenter)="onItemHover($event)">
|
||||
<i-bs width="1.2em" height="1.2em" name="{{icon}}" class="me-2 text-muted"></i-bs>
|
||||
<div class="text-truncate">
|
||||
{{item[nameProp]}}
|
||||
@if (date) {
|
||||
<small class="small text-muted">{{date | customDate}}</small>
|
||||
}
|
||||
</button>
|
||||
@if (type !== DataType.Workflow && type !== DataType.CustomField && type !== DataType.Group && type !== DataType.User && type !== DataType.MailAccount && type !== DataType.MailRule) {
|
||||
<button #secondaryButton type="button" class="btn btn-sm btn-outline-primary d-flex"
|
||||
(click)="secondaryAction(type, item); $event.stopPropagation()"
|
||||
[disabled]="disableSecondaryButton(type, item)"
|
||||
</div>
|
||||
<div class="btn-group ms-auto">
|
||||
<button #primaryButton type="button" class="btn btn-sm btn-outline-primary d-flex"
|
||||
(click)="primaryAction(type, item); $event.stopPropagation()"
|
||||
[disabled]="disablePrimaryButton(type, item)"
|
||||
(mouseenter)="onButtonHover($event)">
|
||||
@if (type === DataType.Document) {
|
||||
<i-bs width="1em" height="1em" name="download"></i-bs>
|
||||
<span> <ng-container i18n>Download</ng-container></span>
|
||||
} @else {
|
||||
<i-bs width="1em" height="1em" name="pencil"></i-bs>
|
||||
<span> <ng-container i18n>Open</ng-container></span>
|
||||
} @else if (type === DataType.Workflow || type === DataType.CustomField || type === DataType.Group || type === DataType.User || type === DataType.MailAccount || type === DataType.MailRule) {
|
||||
<i-bs width="1em" height="1em" name="pencil"></i-bs>
|
||||
<span> <ng-container i18n>Edit</ng-container></span>
|
||||
} @else {
|
||||
<i-bs width="1em" height="1em" name="filter"></i-bs>
|
||||
<span> <ng-container i18n>Filter documents</ng-container></span>
|
||||
}
|
||||
</button>
|
||||
}
|
||||
@if (type !== DataType.Workflow && type !== DataType.CustomField && type !== DataType.Group && type !== DataType.User && type !== DataType.MailAccount && type !== DataType.MailRule) {
|
||||
<button #secondaryButton type="button" class="btn btn-sm btn-outline-primary d-flex"
|
||||
(click)="secondaryAction(type, item); $event.stopPropagation()"
|
||||
[disabled]="disableSecondaryButton(type, item)"
|
||||
(mouseenter)="onButtonHover($event)">
|
||||
@if (type === DataType.Document) {
|
||||
<i-bs width="1em" height="1em" name="download"></i-bs>
|
||||
<span> <ng-container i18n>Download</ng-container></span>
|
||||
} @else {
|
||||
<i-bs width="1em" height="1em" name="pencil"></i-bs>
|
||||
<span> <ng-container i18n>Edit</ng-container></span>
|
||||
}
|
||||
</button>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ng-template>
|
||||
</ng-template>
|
||||
|
||||
<div ngbDropdownMenu class="w-100 mh-75 overflow-y-scroll shadow-lg">
|
||||
<div ngbDropdownMenu class="w-100 mh-75 overflow-y-scroll shadow-lg" (keydown)="dropdownKeyDown($event)">
|
||||
@if (searchResults?.total === 0) {
|
||||
<h6 class="dropdown-header" i18n="@@searchResults.noResults">No results</h6>
|
||||
} @else {
|
||||
|
||||
Reference in New Issue
Block a user