Add close of fab on fab-list click

kirbydesign · Sep 9, 2022 · 3c6cc92 · 3c6cc92
1 parent 287254e
commit 3c6cc92
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 2 deletions.
diff --git a/libs/designsystem/src/lib/components/fab-sheet/fab-sheet.component.html b/libs/designsystem/src/lib/components/fab-sheet/fab-sheet.component.html
@@ -7,7 +7,12 @@
   <ion-fab-button [disabled]="disabled" [attr.disabled]="disabled ? true : null" tabindex="-1">
     <ng-content select="kirby-icon"></ng-content>
   </ion-fab-button>
-  <ion-fab-list *ngIf="actionSheet" side="top" class="{{ horizontalAlignment }}">
+  <ion-fab-list
+    *ngIf="actionSheet"
+    side="top"
+    class="{{ horizontalAlignment }}"
+    (click)="onFabListClick(fab)"
+  >
     <ng-content select="kirby-action-sheet"></ng-content>
   </ion-fab-list>
 </ion-fab>
diff --git a/libs/designsystem/src/lib/components/fab-sheet/fab-sheet.component.ts b/libs/designsystem/src/lib/components/fab-sheet/fab-sheet.component.ts
@@ -74,7 +74,10 @@ export class FabSheetComponent implements AfterContentInit {
     // Postpone backdrop visibility update to allow for animation of opacity
     setTimeout(() => {
       this._isBackdropVisible = this.isFabSheetOpen;
-      this.changeDetectorRef.markForCheck();
     });
   }
+
+  onFabListClick(fab: IonFab) {
+    fab.close();
+  }
 }