Fix dropdown scroll problem on touch devices

kirbydesign · Jul 25, 2022 · c6e8346 · c6e8346
1 parent 441b124
commit c6e8346
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 2 deletions.
diff --git a/libs/designsystem/src/lib/components/dropdown/dropdown.component.html b/libs/designsystem/src/lib/components/dropdown/dropdown.component.html
@@ -26,7 +26,7 @@
 </ng-template>
 
 <ng-template #itemWrapperTemplate>
-  <kirby-card>
+  <kirby-card (touchstart)="onTouchStart($event)">
     <ng-container *ngFor="let item of items; let i = index">
       <ng-container
         *ngTemplateOutlet="

diff --git a/libs/designsystem/src/lib/components/dropdown/dropdown.component.ts b/libs/designsystem/src/lib/components/dropdown/dropdown.component.ts
@@ -236,7 +236,12 @@ export class DropdownComponent implements AfterViewInit, OnDestroy, ControlValue
     event.preventDefault();
   }
 
-  /* Utility that makes it easier to set styles on card element 
+  onTouchStart(event: TouchEvent): void {
+    // Prevent touchmove propgation to allow for scroll on page with pull-to-refresh;
+    event.stopPropagation();
+  }
+
+  /* Utility that makes it easier to set styles on card element
   when using popover*/
   private setPopoverCardStyle(style: string, value: string) {
     if (!this.usePopover) return;