Prevent ion-fab from closing when i click a ion-fab-button inside the ion-fab-list

Ionic Framework
1

Hi,
I am using Angular 13 and IonicV6
I have a ion-fab button. within the button i have 2 sets of ion-fab-lists with ion-fab-buttons. The second list is displayed after i click a button in the first list. the problem is that the ion-fab closes when i click a button. I want to keep the ion-fab open when i click the specific button and just display the second fab-list. I can only find a close() function in the documentation.
I tried setting the “activated” property programatically, also i tried using stopPropagation() on the button click event, nothing seems to work.

<ion-fab vertical="bottom" horizontal="end" slot="fixed" #fab>
  <ion-fab-button #fabButton
    (ionBlur)="onLoseFocus($event)"
    >
      <ds-icon icon="more_vertical"></ds-icon>
  </ion-fab-button>

  <ion-fab-list *ngIf="!isEditMode" side="top"">
    <ion-fab-button *ngFor="let button of buttons"
        (click)="handleClick(button, $event)"
    >
        <ds-icon [icon]="button?.icon"></ds-icon>
    </ion-fab-button>
  </ion-fab-list>

  <ion-fab-list *ngIf="isEditMode" side="top">
    <ion-fab-button
        class="grid-action-button__button_edit-mode-confirm"
        (click)="handleClick(button, $event)"
    >
        <ds-icon icon="check" style="color:green"></ds-icon>
    </ion-fab-button>
    <ion-fab-button
        (click)="handleClick(button, $event)"
    >
        <ds-icon icon="close" style="color:red"></ds-icon>
    </ion-fab-button>
  </ion-fab-list>

</ion-fab>

export class GridActionButtonComponent implements OnChanges {

  @Input() buttons: ActionCellButton[];
  @Input() rowNode: RowNode;
  @Input() isEditMode: boolean;

  public isExpanded = false;
  public isButtonDisabled = true;

  public isFabOpen = false;

  @ViewChild('fab') fabEl : ElementRef | any;
  @ViewChild('fabButton') fabButtonEl : ElementRef | any;

  ngOnChanges(changes : SimpleChanges): void {
    this.isExpanded = this.rowNode?.expanded;
    this.isButtonDisabled = !this.rowNode?.expanded;
  }

  public handleClick(button: ActionCellButton, event: Event) {
    event.stopPropagation();
    event.preventDefault();
    return button?.action(this.rowNode);
  }

  public onLoseFocus(event : any) {
    event.stopPropagation();
    event.preventDefault();
  }

}
2

Try using event.stopImmediatePropagation(). Worked for me.

2 Likes
3

this one worked for me - ionic 7. thank you!

1 Like