SelectableListBoxDropdown: add keyboard navigation #2612

-aligned behaviour with combobox
enonic · Jun 6, 2022 · f058667 · f058667
1 parent cca9574
commit f058667
Show file tree

Hide file tree

Showing 4 changed files with 218 additions and 70 deletions.
diff --git a/src/main/resources/assets/admin/common/js/ui/selector/list/ListBoxDropdown.ts b/src/main/resources/assets/admin/common/js/ui/selector/list/ListBoxDropdown.ts
@@ -4,6 +4,7 @@ import {DropdownHandle} from '../../button/DropdownHandle';
 import {DivEl} from '../../../dom/DivEl';
 import {Element} from '../../../dom/Element';
 import {ValueChangedEvent} from '../../../ValueChangedEvent';
+import {KeyHelper} from '../../KeyHelper';
 
 export interface ListBoxDropdownOptions<I> {
     filter?: (item: I, searchString: string) => boolean;
@@ -58,6 +59,12 @@ export class ListBoxDropdown<I> extends DivEl {
                 });
             }
         });
+
+        this.optionFilterInput.onKeyDown((event: KeyboardEvent) => {
+            if (!this.listBox.isVisible() && KeyHelper.isArrowDownKey(event)) {
+                this.listBox.setVisible(true);
+            }
+        });
     }
 
     protected filterItem(item: I, searchString: string): void {