bug: ion-fab.close() often doesn't work when ion-fab is in a component

[me-to-you93]

Prerequisites

• [X] I have read the Contributing Guidelines.
• [X] I agree to follow the Code of Conduct.
• [X] I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

• [ ] v4.x
• [ ] v5.x
• [X] v6.x
• [ ] Nightly

Current Behavior

When I click on the text of an item, everything works but if I click on the icon of an item, the ion-fab.close() doesn't work.

Expected Behavior

The close function should work when I call it from the item's label and from the item's icon.

Steps to Reproduce

I have a custom component to manage the ion-fab.

<ion-fab slot="fixed" horizontal="end" vertical="bottom" #fab>
  <ion-fab-button>
    <ion-icon name="add"></ion-icon>
  </ion-fab-button>
  <ion-fab-list side="top" >
    <div class="custom-fab" *ngFor="let item of items">
      <ion-button *ngIf="item.isVisible" (click)="action(item)">{{item.label}}</ion-button>
      <ion-fab-button *ngIf="item.isVisible" (click)="action(item)" size="small">
        <ion-icon *ngIf="item.isVisible" src="../../assets/custom_icons/{{item.icon}}.svg" ></ion-icon>
      </ion-fab-button>
    </div>
  </ion-fab-list>
</ion-fab>

import { Component, ViewChild, Input } from '@angular/core';
import { IonFab } from '@ionic/angular';

@Component({
  selector: 'app-custom-fab-menu',
  templateUrl: './custom-fab-menu.component.html',
  styleUrls: ['./custom-fab-menu.component.scss'],
})
export class CustomFabMenuComponent {

  @ViewChild('fab') fab: IonFab;
  @Input("items") items: FabMenuItem[] = [];

  constructor( ) { }

  public async action(item: FabMenuItem) {
    this.hide();
    item.onClick();
  }

  public hide() {
    this.fab.close();
  }
}

export class FabMenuItem {
  constructor(
      //public id: string,
      public icon: string,
      public action: string,
      public label: string,
      public onClick: Function, // added
      public isVisible: boolean,
      public key : string
  ) { }
}

Try clicking on the label (it closes the fab), then try to click on the icon (it doesn't closes). The passed action (onClick call) is well executed though.

Code Reproduction URL

No response

Ionic Info

Ionic:

Ionic CLI : 6.20.3 (C:\Users\gmartin\AppData\Roaming\npm\node_modules\@ionic\cli) Ionic Framework : @ionic/angular 6.3.3 @angular-devkit/build-angular : 12.2.18 @angular-devkit/schematics : 12.2.18 @angular/cli : 12.2.18 @ionic/angular-toolkit : 4.0.0

Cordova:

Cordova CLI : 11.0.0 Cordova Platforms : android 11.0.0 Cordova Plugins : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 5.0.0, (and 16 other plugins)

Utility:

cordova-res : 0.15.4 native-run : 1.7.1

System:

Android SDK Tools : 26.1.1 (C:\Users\gmartin\AppData\Local\Android\Sdk) NodeJS : v16.13.0 (C:\Program Files\nodejs\node.exe) npm : 8.1.0 OS : Windows 10

Additional Information

No response

[liamdebeasi]

Thanks for the report. Can you reproduce this using an Ionic starter app or playground and provide the link here?

[ionitron-bot[bot]]

Thanks for the issue! This issue is being closed due to the lack of a reply. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.

Thank you for using Ionic!