From 275b057b40484218f5218555d53db22d422a6b13 Mon Sep 17 00:00:00 2001
From: Adam Doan <adam.c.doan@gmail.com>
Date: Wed, 21 Jun 2023 17:37:22 +0000
Subject: [PATCH] Add the ability to expand / collapse via keyboard

---
 .../dynamic-scrollable-dropdown.component.html  |  2 +-
 .../dynamic-scrollable-dropdown.component.ts    | 17 +++++++++++++++++
 2 files changed, 18 insertions(+), 1 deletion(-)

diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/scrollable-dropdown/dynamic-scrollable-dropdown.component.html b/src/app/shared/form/builder/ds-dynamic-form-ui/models/scrollable-dropdown/dynamic-scrollable-dropdown.component.html
index 3a75fe1037..6e2d29b789 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/scrollable-dropdown/dynamic-scrollable-dropdown.component.html
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/scrollable-dropdown/dynamic-scrollable-dropdown.component.html
@@ -23,7 +23,7 @@
            (blur)="onBlur($event)"
            (click)="$event.stopPropagation(); openDropdown(sdRef);"
            (focus)="onFocus($event)"
-           (keypress)="$event.preventDefault()">
+           (keydown)="selectOnKeyDown($event, sdRef)">
   </div>
 
   <div ngbDropdownMenu
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/scrollable-dropdown/dynamic-scrollable-dropdown.component.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/models/scrollable-dropdown/dynamic-scrollable-dropdown.component.ts
index 43b785b21f..a4ca210193 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/scrollable-dropdown/dynamic-scrollable-dropdown.component.ts
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/scrollable-dropdown/dynamic-scrollable-dropdown.component.ts
@@ -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
    */