Add the ability to expand / collapse via keyboard

This commit is contained in:
Adam Doan
2023-06-21 17:37:22 +00:00
parent 499bfe3154
commit 275b057b40
2 changed files with 18 additions and 1 deletions

View File

@@ -23,7 +23,7 @@
(blur)="onBlur($event)" (blur)="onBlur($event)"
(click)="$event.stopPropagation(); openDropdown(sdRef);" (click)="$event.stopPropagation(); openDropdown(sdRef);"
(focus)="onFocus($event)" (focus)="onFocus($event)"
(keypress)="$event.preventDefault()"> (keydown)="selectOnKeyDown($event, sdRef)">
</div> </div>
<div ngbDropdownMenu <div ngbDropdownMenu

View File

@@ -98,6 +98,23 @@ export class DsDynamicScrollableDropdownComponent extends DsDynamicVocabularyCom
} }
} }
/**
* KeyDown handler to allow toggling the dropdown via keyboard
* @param event KeyboardEvent
* @param sdRef The reference of the NgbDropdown.
*/
selectOnKeyDown(event: KeyboardEvent, sdRef: NgbDropdown) {
const keyName = event.key;
if (keyName === ' ' || keyName === 'Enter') {
event.preventDefault();
event.stopPropagation();
sdRef.toggle();
} else if (keyName === 'ArrowDown' || keyName === 'ArrowUp') {
this.openDropdown(sdRef);
}
}
/** /**
* Loads any new entries * Loads any new entries
*/ */