paradizelost/paperless-ngx
1
0
Fork 0
mirror of https://github.com/paperless-ngx/paperless-ngx.git synced 2025-04-02 13:45:10 -05:00
Code Issues Packages Projects Releases Wiki Activity

Fix ngbDropdown stealing keyboard events

Browse Source
This commit is contained in:
shamoon 2024-05-04 09:47:27 -07:00
parent c6e7d06bb7
commit b403b9d9d5
3 changed files with 108 additions and 85 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src-ui/src/app/components/app-frame/global-search/global-search.component.html
View File

@ -36,7 +36,8 @@
</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()"
(click)="primaryAction(type, item); $event.stopImmediatePropagation()"
(keydown)="onButtonKeyDown($event)"
[disabled]="disablePrimaryButton(type, item)"
(mouseenter)="onButtonHover($event)">
@if (type === DataType.Document) {
@ -55,7 +56,8 @@
</button>
@if (type !== DataType.SavedView && 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()"
(click)="secondaryAction(type, item); $event.stopImmediatePropagation()"
(keydown)="onButtonKeyDown($event)"
[disabled]="disableSecondaryButton(type, item)"
(mouseenter)="onButtonHover($event)">
@if (type === DataType.Document) {
@ -71,7 +73,8 @@
</div>
</ng-template>
<div ngbDropdownMenu class="w-100 mh-75 overflow-y-scroll shadow-lg" (keydown)="dropdownKeyDown($event)">
<div ngbDropdownMenu class="w-100 mh-75 overflow-y-scroll shadow-lg">
<div (keydown)="dropdownKeyDown($event)">
@if (searchResults?.total === 0) {
<h6 class="dropdown-header" i18n="@@searchResults.noResults">No results</h6>
} @else {
@ -158,6 +161,6 @@
}
}
}
</div>
</div>
</div>

7
src-ui/src/app/components/app-frame/global-search/global-search.component.spec.ts
View File

@ -442,6 +442,13 @@ describe('GlobalSearchComponent', () => {
expect(focusSpy).toHaveBeenCalled()
})
it('should prevent event propagation for keyboard events on buttons that are not arrows', () => {
const event = { stopImmediatePropagation: jest.fn(), key: 'Enter' }
const stopPropagationSpy = jest.spyOn(event, 'stopImmediatePropagation')
component.onButtonKeyDown(event as any)
expect(stopPropagationSpy).toHaveBeenCalled()
})
it('should support explicit advanced search', () => {
const qfSpy = jest.spyOn(documentListViewService, 'quickFilter')
component.query = 'test'

13
src-ui/src/app/components/app-frame/global-search/global-search.component.ts
View File

@ -292,6 +292,7 @@ export class GlobalSearchComponent implements OnInit {
) {
if (event.key === 'ArrowDown') {
event.preventDefault()
event.stopImmediatePropagation()
if (this.currentItemIndex < this.searchResults.total - 1) {
this.currentItemIndex++
this.setCurrentItem()
@ -301,6 +302,7 @@ export class GlobalSearchComponent implements OnInit {
}
} else if (event.key === 'ArrowUp') {
event.preventDefault()
event.stopImmediatePropagation()
if (this.currentItemIndex > 0) {
this.currentItemIndex--
this.setCurrentItem()
@ -310,14 +312,25 @@ export class GlobalSearchComponent implements OnInit {
}
} else if (event.key === 'ArrowRight') {
event.preventDefault()
event.stopImmediatePropagation()
this.secondaryButtons.get(this.domIndex)?.nativeElement.focus()
} else if (event.key === 'ArrowLeft') {
event.preventDefault()
event.stopImmediatePropagation()
this.primaryButtons.get(this.domIndex).nativeElement.focus()
}
}
}
onButtonKeyDown(event: KeyboardEvent) {
// prevents ngBootstrap issue with keydown events
if (
!['ArrowDown', 'ArrowUp', 'ArrowRight', 'ArrowLeft'].includes(event.key)
) {
event.stopImmediatePropagation()
}
}
public onDropdownOpenChange(open: boolean) {
if (!open) {
this.reset()