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

**URL:** <https://forum.ionicframework.com/t/prevent-ion-fab-from-closing-when-i-click-a-ion-fab-button-inside-the-ion-fab-list/231958>\
**Category:** Ionic Framework\
**Created:** [March 22, 2023, 11:03am UTC](https://forum.ionicframework.com/t/prevent-ion-fab-from-closing-when-i-click-a-ion-fab-button-inside-the-ion-fab-list/231958 "2023-03-22T11:03:52Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![gleixnerP](https://avatars.discourse-cdn.com/v4/letter/g/d07c76/32.png) [@gleixnerP](https://forum.ionicframework.com/u/gleixnerP)\
**Post date:** [March 22, 2023, 11:03am UTC](https://forum.ionicframework.com/t/prevent-ion-fab-from-closing-when-i-click-a-ion-fab-button-inside-the-ion-fab-list/231958/1 "2023-03-22T11:03:52Z")

</div>

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.

```auto
<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>

```

```auto
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();
  }

}

```

---

<div class="post-metadata">

**Author:** ![juha-koivisto](https://avatars.discourse-cdn.com/v4/letter/j/71e660/32.png) [@juha-koivisto](https://forum.ionicframework.com/u/juha-koivisto)\
**Post date:** [November 20, 2023, 1:22pm UTC](https://forum.ionicframework.com/t/prevent-ion-fab-from-closing-when-i-click-a-ion-fab-button-inside-the-ion-fab-list/231958/2 "2023-11-20T13:22:54Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![StakeDevelopers](https://avatars.discourse-cdn.com/v4/letter/s/bcef8e/32.png) [@StakeDevelopers](https://forum.ionicframework.com/u/StakeDevelopers)\
**Post date:** [January 2, 2024, 9:45am UTC](https://forum.ionicframework.com/t/prevent-ion-fab-from-closing-when-i-click-a-ion-fab-button-inside-the-ion-fab-list/231958/3 "2024-01-02T09:45:58Z")

</div>

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