Fix item-selection of dropdown with popover on safari

kirbydesign · Jun 16, 2022 · be58be9 · be58be9
1 parent 5b85206
commit be58be9
Show file tree

Hide file tree

Showing 3 changed files with 52 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
@@ -50,6 +50,41 @@ describe('DropdownComponent + PopoverComponent', () => {
       ],
     });
 
+    fdescribe('when configured with XXX', () => {
+      beforeEach(() => {
+        spectator = createHost(`<kirby-dropdown [usePopover]="true"></kirby-dropdown>`, {
+          props: {
+            items: items,
+          },
+        });
+        buttonElement = spectator.query('button[kirby-button]');
+      });
+
+      it('should select the item', () => {
+        const selectedIndex = 2;
+        const expectedItem = items[selectedIndex];
+        spectator.component.writeValue(expectedItem);
+        expect(spectator.component.selectedIndex).toEqual(selectedIndex);
+        expect(spectator.component.value).toEqual(expectedItem);
+      });
+
+      it('should not emit change event', () => {
+        const onChangeSpy = spyOn(spectator.component.change, 'emit');
+        spectator.click('button');
+        expect(onChangeSpy).not.toHaveBeenCalled();
+      });
+
+      it('should select the item', fakeAsync(() => {
+        const onChangeSpy = spyOn(spectator.component.change, 'emit');
+        spectator.click('button');
+        tick(openDelayInMs);
+        spectator.detectChanges();
+        expect(spectator.component.isOpen).toBeTruthy();
+        spectator.click('ion-item');
+        expect(onChangeSpy).toHaveBeenCalled();
+      }));
+    });
+
     describe('when configured with popout direction', () => {
       beforeEach(() => {
         spectator = createHost(

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();
   }