Fix item-selection of dropdown with popover on safari

kirbydesign · Jun 17, 2022 · a64170e · a64170e
1 parent 5b85206
commit a64170e
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 7 deletions.
diff --git a/libs/designsystem/src/lib/components/dropdown/dropdown-popover.component.integration.spec.ts b/libs/designsystem/src/lib/components/dropdown/dropdown-popover.component.integration.spec.ts
@@ -173,5 +173,22 @@ describe('DropdownComponent + PopoverComponent', () => {
     it('should have options be visible', () => {
       expect(cardElement).toBeVisible();
     });
+
+    it('should select the selected item', () => {
+      const expectedItem = items[0];
+
+      spectator.click('kirby-item');
+
+      expect(spectator.component.value).toEqual(expectedItem);
+    });
+
+    it('should emit change event with the selected item', () => {
+      const expectedItem = items[0];
+      const onChangeSpy = spyOn(spectator.component.change, 'emit');
+
+      spectator.click('kirby-item');
+
+      expect(onChangeSpy).toHaveBeenCalledWith(expectedItem);
+    });
   });
 });
diff --git a/libs/designsystem/src/lib/components/dropdown/dropdown.component.html b/libs/designsystem/src/lib/components/dropdown/dropdown.component.html
@@ -15,7 +15,12 @@
 <ng-container *ngTemplateOutlet="usePopover ? popoverTemplate : itemWrapperTemplate"></ng-container>
 
 <ng-template #popoverTemplate>
-  <kirby-popover [target]="buttonElement" [popout]="popout" (willHide)="_onPopoverWillHide()">
+  <kirby-popover
+    [target]="buttonElement"
+    [popout]="popout"
+    (click)="_onPopoverClicked($event)"
+    (willHide)="_onPopoverWillHide()"
+  >
     <ng-container *ngTemplateOutlet="itemWrapperTemplate"></ng-container>
   </kirby-popover>
 </ng-template>

diff --git a/libs/designsystem/src/lib/components/dropdown/dropdown.component.ts b/libs/designsystem/src/lib/components/dropdown/dropdown.component.ts
@@ -471,14 +471,19 @@ export class DropdownComponent
 
   @HostListener('keydown.enter')
   @HostListener('keydown.escape')
+  _onEnterOrEsscape(event?: FocusEvent) {
+    this.close();
+    this._onTouched();
+  }
+
+  _onPopoverClicked(event: PointerEvent) {
+    this.close();
+  }
+
   @HostListener('blur', ['$event'])
   _onBlur(event?: FocusEvent) {
-    if (this.disabled) return;
-    if (this.isOpen) {
-      if (!this.cardElement.nativeElement.contains(event?.relatedTarget as HTMLElement)) {
-        this.close();
-      }
-    }
+    if (this.usePopover) return;
+    this.close();
     this._onTouched();
   }