Fix no automatic close of fab-sheet on item click.

libs/designsystem/src/lib/components/fab-sheet/fab-sheet.component.html

@@ -1,13 +1,23 @@
 <ion-backdrop
-  *ngIf="actionSheet && isFabSheetOpen"
-  (ionBackdropTap)="hideActions(fab)"
-  (click)="hideActions(fab)"
+  [class.backdrop-visible]="isBackdropVisible"
+  (ionBackdropTap)="hideActions()"
+  (click)="hideActions()"
 ></ion-backdrop>
-<ion-fab #fab (click)="disabled || onFabClick(fab)">
-  <ion-fab-button [disabled]="disabled" [attr.disabled]="disabled ? true : null" tabindex="-1">
+<ion-fab>
+  <ion-fab-button
+    (click)="onFabButtonClick()"
+    [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()"
+  >
     <ng-content select="kirby-action-sheet"></ng-content>
   </ion-fab-list>
 </ion-fab>

libs/designsystem/src/lib/components/fab-sheet/fab-sheet.component.scss

@@ -52,17 +52,19 @@ ion-fab {
 }
 
 ion-backdrop {
+  visibility: hidden;
   opacity: 0;
   transition: opacity 750ms;
   position: fixed;
   z-index: 999;
-}
 
-:host(.backdrop-visible) ion-backdrop {
-  opacity: 0.4;
+  &.backdrop-visible {
+    visibility: visible;
+    opacity: 0.4;
 
-  @include utils.media('>=medium') {
-    opacity: 0;
+    @include utils.media('>=medium') {
+      opacity: 0;
+    }
   }
 }
 

libs/designsystem/src/lib/components/fab-sheet/fab-sheet.component.spec.ts

@@ -1,29 +1,86 @@
-import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
-import * as ionic from '@ionic/angular';
-import { MockComponents } from 'ng-mocks';
+import { fakeAsync, tick } from '@angular/core/testing';
+import { RouterTestingModule } from '@angular/router/testing';
+import { IonBackdrop, IonFab, IonFabButton, IonFabList, IonIcon } from '@ionic/angular';
+import { createHostFactory, SpectatorHost } from '@ngneat/spectator';
+
+import { TestHelper } from '../../testing/test-helper';
+import { ButtonComponent } from '../button/button.component';
+import { CardComponent, CardHeaderComponent } from '../card';
+import { IconComponent } from '../icon';
+import { ActionSheetComponent, ActionSheetItem } from '../modal';
 
 import { FabSheetComponent } from './fab-sheet.component';
 
-describe('FabSheetComponent', () => {
+fdescribe('FabSheetComponent', () => {
+  let spectator: SpectatorHost<FabSheetComponent>;
   let component: FabSheetComponent;
-  let fixture: ComponentFixture<FabSheetComponent>;
-
-  beforeEach(waitForAsync(() => {
-    TestBed.configureTestingModule({
-      declarations: [
-        FabSheetComponent,
-        MockComponents(ionic.IonFab, ionic.IonFabButton, ionic.IonFabList, ionic.IonBackdrop),
-      ],
-    }).compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(FabSheetComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
+  let ionFabButtonElement: HTMLIonFabButtonElement;
+
+  const createHost = createHostFactory({
+    component: FabSheetComponent,
+    imports: [TestHelper.ionicModuleForTest, RouterTestingModule],
+    declarations: [
+      IonFab,
+      IonFabButton,
+      IonFabList,
+      IonBackdrop,
+      IconComponent,
+      IonIcon,
+      ActionSheetComponent,
+      CardComponent,
+      CardHeaderComponent,
+      ButtonComponent,
+    ],
+  });
+
+  const items: ActionSheetItem[] = [
+    { id: '1', text: 'Option 1' },
+    { id: '2', text: 'Option 2' },
+    { id: '3', text: 'Option 3' },
+  ];
+
+  beforeEach(async () => {
+    spectator = createHost(
+      `<kirby-fab-sheet>
+          <kirby-icon name="write-message"></kirby-icon>
+          <kirby-action-sheet
+            header="Your action sheet header"
+            subheader="Your action sheet subheader"
+            [items]="items"
+          >
+          </kirby-action-sheet>
+        </kirby-fab-sheet>`,
+      {
+        hostProps: {
+          items: items,
+        },
+      }
+    );
+    component = spectator.component;
+    ionFabButtonElement = spectator.query('ion-fab-button');
+    await TestHelper.whenReady(ionFabButtonElement);
+  });
+
+  describe("when 'fabSheet' is closed", () => {
+    it("should open when 'fabButton' is clicked", fakeAsync(() => {
+      spectator.click(ionFabButtonElement);
+      tick();
+      expect(component.isFabSheetOpen).toBe(true);
+      expect(component.isBackdropVisible).toBe(true);
+    }));
   });
 
-  it('should create', () => {
-    expect(component).toBeTruthy();
+  describe("when 'fabSheet' is open", () => {
+    beforeEach(fakeAsync(() => {
+      spectator.click(ionFabButtonElement);
+      tick();
+    }));
+
+    it("should close backdrop when 'actionSheet' item is seleccted", fakeAsync(() => {
+      spectator.click('button[kirby-button]');
+      tick();
+      expect(component.isFabSheetOpen).toBe(false);
+      expect(component.isBackdropVisible).toBe(false);
+    }));
   });
 });

libs/designsystem/src/lib/components/fab-sheet/fab-sheet.component.ts

@@ -33,7 +33,6 @@ export class FabSheetComponent implements AfterContentInit {
   }
 
   private _isBackdropVisible: boolean = false;
-  @HostBinding('class.backdrop-visible')
   get isBackdropVisible() {
     return this._isBackdropVisible;
   }
@@ -43,38 +42,46 @@ export class FabSheetComponent implements AfterContentInit {
   @ViewChild(IonFabButton, { static: true, read: ElementRef })
   ionFabButton: ElementRef<HTMLElement>;
 
+  @ViewChild(IonFab, { static: true })
+  ionFab: IonFab;
+
   constructor(
-    private renderer: Renderer2,
     private changeDetectorRef: ChangeDetectorRef,
+    private renderer: Renderer2,
     @Inject(DOCUMENT) private document: any
   ) {}
 
   ngAfterContentInit(): void {
-    if (this.actionSheet) {
+    if (!!this.actionSheet) {
       this.actionSheet.hideCancel = true;
     }
   }
 
-  hideActions(fab: IonFab) {
-    fab.close();
-    this._isFabSheetOpen = false;
-    this._isBackdropVisible = false;
-    this.renderer.removeClass(this.document.body, 'fab-sheet-active');
+  hideActions() {
+    this.ionFab.close().then(() => this.fabSheetStateChanged(false));
   }
 
-  onFabClick(fab: IonFab) {
-    this._isFabSheetOpen = fab.activated;
+  onFabButtonClick() {
+    setTimeout(() => {
+      this.fabSheetStateChanged(this.ionFab.activated);
+    });
+  }
 
-    if (this._isFabSheetOpen) {
+  onFabListClick() {
+    this.ionFab.close().then(() => {
+      this.fabSheetStateChanged(false);
+    });
+  }
+
+  fabSheetStateChanged(isOpen: boolean) {
+    this._isFabSheetOpen = isOpen;
+    if (this.isFabSheetOpen) {
       this.renderer.addClass(this.document.body, 'fab-sheet-active');
     } else {
       this.renderer.removeClass(this.document.body, 'fab-sheet-active');
     }
 
-    // Postpone backdrop visibility update to allow for animation of opacity
-    setTimeout(() => {
-      this._isBackdropVisible = this.isFabSheetOpen;
-      this.changeDetectorRef.markForCheck();
-    });
+    this._isBackdropVisible = !!this.actionSheet && isOpen;
+    this.changeDetectorRef.detectChanges();
   }
 }