Enable keyboard navigation in the dropdown

apps/cookbook/src/app/examples/dropdown-example/examples/custom-item-template.ts

@@ -8,9 +8,11 @@ const config = {
   [items]="items"
   itemTextProperty="title">
   <kirby-item
-    *kirbyListItemTemplate="let item; let selected = selected"
+    *kirbyListItemTemplate="let item; let selected = selected; let focused = focused"
     selectable="true"
-    [selected]="selected">
+    [selected]="selected"
+    [class.focused]="focused"
+  >
     <kirby-icon *ngIf="selected" name="checkmark-selected" slot="start"></kirby-icon>
     <kirby-label>
       <h3>{{ item.title }}</h3>

libs/designsystem/src/lib/components/dropdown/dropdown-popover.component.spec.ts

@@ -309,23 +309,39 @@ describe('DropdownComponent (popover version)', () => {
       });
 
       describe('and Space key is pressed', () => {
-        beforeEach(fakeAsync(() => {
+        it('should open dropdown', fakeAsync(() => {
           spectator.dispatchKeyboardEvent(spectator.element, 'keydown', 'Space');
           tick(openDelayInMs);
-        }));
-        it('should open dropdown', () => {
+
           expect(spectator.component.isOpen).toBeTruthy();
-        });
+        }));
       });
 
       describe('and Enter key is pressed', () => {
-        beforeEach(fakeAsync(() => {
+        it('should open dropdown', fakeAsync(() => {
           spectator.dispatchKeyboardEvent(spectator.element, 'keydown', 'Enter');
           tick(openDelayInMs);
+
+          expect(spectator.component.isOpen).toBeTruthy();
+        }));
+      });
+
+      describe('and ArrowDown key is pressed', () => {
+        it('should open dropdown', fakeAsync(() => {
+          spectator.dispatchKeyboardEvent(spectator.element, 'keydown', 'ArrowDown');
+          tick(openDelayInMs);
+
+          expect(spectator.component.isOpen).toBeTruthy();
         }));
-        it('should open dropdown', () => {
+      });
+
+      describe('and ArrowUp key is pressed', () => {
+        it('should open dropdown', fakeAsync(() => {
+          spectator.dispatchKeyboardEvent(spectator.element, 'keydown', 'ArrowUp');
+          tick(openDelayInMs);
+
           expect(spectator.component.isOpen).toBeTruthy();
-        });
+        }));
       });
 
       describe('and first item is selected', () => {
@@ -378,144 +394,6 @@ describe('DropdownComponent (popover version)', () => {
           });
         });
       });
-
-      const testMatrix = [
-        {
-          key: 'ArrowLeft',
-          scenario: [
-            {
-              selectedIndex: 1,
-              keypressCount: 1,
-              expectedIndex: 0,
-            },
-            {
-              selectedIndex: 2,
-              keypressCount: 1,
-              expectedIndex: 1,
-            },
-            {
-              selectedIndex: 2,
-              keypressCount: 2,
-              expectedIndex: 0,
-            },
-          ],
-        },
-        {
-          key: 'ArrowUp',
-          scenario: [
-            {
-              selectedIndex: 1,
-              keypressCount: 1,
-              expectedIndex: 0,
-            },
-            {
-              selectedIndex: 2,
-              keypressCount: 1,
-              expectedIndex: 1,
-            },
-            {
-              selectedIndex: 2,
-              keypressCount: 2,
-              expectedIndex: 0,
-            },
-          ],
-        },
-        {
-          key: 'ArrowRight',
-          scenario: [
-            {
-              selectedIndex: 0,
-              keypressCount: 1,
-              expectedIndex: 1,
-            },
-            {
-              selectedIndex: 0,
-              keypressCount: 2,
-              expectedIndex: 2,
-            },
-            {
-              selectedIndex: 1,
-              keypressCount: 1,
-              expectedIndex: 2,
-            },
-          ],
-        },
-        {
-          key: 'ArrowDown',
-          scenario: [
-            {
-              selectedIndex: 0,
-              keypressCount: 1,
-              expectedIndex: 1,
-            },
-            {
-              selectedIndex: 0,
-              keypressCount: 2,
-              expectedIndex: 2,
-            },
-            {
-              selectedIndex: 1,
-              keypressCount: 1,
-              expectedIndex: 2,
-            },
-          ],
-        },
-        {
-          key: 'Home',
-          scenario: [
-            {
-              selectedIndex: 1,
-              keypressCount: 1,
-              expectedIndex: 0,
-            },
-            {
-              selectedIndex: 2,
-              keypressCount: 1,
-              expectedIndex: 0,
-            },
-            {
-              selectedIndex: 4,
-              keypressCount: 1,
-              expectedIndex: 0,
-            },
-          ],
-        },
-        {
-          key: 'End',
-          scenario: [
-            {
-              selectedIndex: 0,
-              keypressCount: 1,
-              expectedIndex: 4,
-            },
-            {
-              selectedIndex: 1,
-              keypressCount: 1,
-              expectedIndex: 4,
-            },
-            {
-              selectedIndex: 2,
-              keypressCount: 1,
-              expectedIndex: 4,
-            },
-          ],
-        },
-      ];
-
-      testMatrix.forEach((keyEvent) => {
-        keyEvent.scenario.forEach((scenario) => {
-          describe(`and selected item = ${scenario.selectedIndex} and ${keyEvent.key} key is pressed ${scenario.keypressCount} time(s)`, () => {
-            it(`should set selected item = ${scenario.expectedIndex}`, () => {
-              spectator.setInput('selectedIndex', scenario.selectedIndex);
-              for (let counter = 0; counter < scenario.keypressCount; counter++) {
-                spectator.dispatchKeyboardEvent(spectator.element, 'keydown', keyEvent.key);
-              }
-              expect(spectator.component.selectedIndex).toEqual(scenario.expectedIndex);
-              expect(spectator.component.value).toEqual(items[scenario.expectedIndex]);
-            });
-          });
-        });
-      });
     });
 
     describe('when open', () => {
@@ -540,9 +418,9 @@ describe('DropdownComponent (popover version)', () => {
       });
 
       describe('and Space key is pressed', () => {
-        it('should not close dropdown', () => {
+        it('should close dropdown', () => {
           spectator.dispatchKeyboardEvent(spectator.element, 'keydown', 'Space');
-          expect(spectator.component.isOpen).toBeTruthy();
+          expect(spectator.component.isOpen).toBeFalsy();
         });
       });
 
@@ -700,6 +578,10 @@ describe('DropdownComponent (popover version)', () => {
               for (let counter = 0; counter < scenario.keypressCount; counter++) {
                 spectator.dispatchKeyboardEvent(spectator.element, 'keydown', keyEvent.key);
               }
+              // focused
+              expect(spectator.component.focusedIndex).toEqual(scenario.expectedIndex);
+              // selected
+              spectator.dispatchKeyboardEvent(spectator.element, 'keydown', 'Enter');
               expect(spectator.component.selectedIndex).toEqual(scenario.expectedIndex);
               expect(spectator.component.value).toEqual(items[scenario.expectedIndex]);
             });

libs/designsystem/src/lib/components/dropdown/dropdown.component.html

@@ -31,15 +31,32 @@
       <ng-container
         *ngTemplateOutlet="
           itemTemplate || defaultItemTemplate;
-          context: { $implicit: item, selected: i === selectedIndex, index: i }
+          context: {
+            $implicit: item,
+            selected: i === selectedIndex,
+            focused: i === focusedIndex,
+            index: i
+          }
         "
       ></ng-container>
     </ng-container>
   </kirby-card>
 </ng-template>
 
-<ng-template #defaultItemTemplate let-item let-selected="selected" let-index="index">
-  <kirby-item [selectable]="true" [selected]="selected" (click)="onItemSelect(index)" role="option">
+<ng-template
+  #defaultItemTemplate
+  let-item
+  let-selected="selected"
+  let-index="index"
+  let-focused="focused"
+>
+  <kirby-item
+    [selectable]="true"
+    [selected]="selected"
+    (click)="onItemSelect(index)"
+    [class.focused]="focused"
+    role="option"
+  >
     <!-- Tabindex fixes issue with popover dropdown not working in safari -->
     <h3 tabindex="0">{{ getTextFromItem(item) }}</h3>
     <kirby-icon *ngIf="selected" name="checkmark-selected" slot="end"></kirby-icon>