I'm having trouble getting a form to stay visible when a fab is clicked in my Ionic 4 app. Every time I click on a fab or another component within the ion-fab-list, the ion-fab-list automatically closes. How can I prevent this from happening and keep the form open?
I've attempted using @ViewChild, but it hasn't been successful. One thing I've noticed about the @ViewChild decorator is that it requires two parameters, which seems different from other solutions I've seen.
form.component.ts
import { Component, OnInit, ViewChild } from '@angular/core';
import { NavController, IonFab } from '@ionic/angular'
@Component({
selector: 'app-form',
templateUrl: './form.component.html',
styleUrls: ['./form.component.scss'],
})
export class FormComponent implements OnInit {
isFabListOpen = false
toggleFab(): void {
this.isFabListOpen = !this.isFabListOpen
console.log('lol')
}
constructor() {}
ngOnInit() {}
}
form.component.scss
ion-fab {
position: fixed;
left: 84%;
float: right;
}
ion-fab-list {
display: flex;
flex-direction: column;
align-items: flex-end;
width: 350px;
right: 130px;
}
form.component.html
<ion-fab horizontal="end" vertical="bottom" slot="fixed" [activated]="isFabListOpen">
<ion-fab-button color="light" (click)="toggleFab()">
<ion-icon name="arrow-dropleft"></ion-icon>
</ion-fab-button>
<ion-fab-list side="top" [hidden]="isFabListOpen">
<!-- <ion-fab-button color="light">
<ion-icon name="logo-facebook"></ion-icon>
</ion-fab-button>
<ion-fab-button color="light">
<ion-icon name="logo-twitter"></ion-icon>
</ion-fab-button>
<ion-fab-button color="light">
<ion-icon name="logo-vimeo"></ion-icon>
</ion-fab-button> -->
<form action="">
<ion-item>
<ion-label>quote</ion-label>
<ion-input type="text" placeholder="Awesome Input"></ion-input>
</ion-item>
<ion-item>
<ion-label>author</ion-label>
<ion-input type="text" placeholder="Awesome Input"></ion-input>
</ion-item>
<ion-item>
<ion-label>author</ion-label>
<ion-input type="text" placeholder="Awesome Input"></ion-input>
</ion-item>
<ion-item>
<ion-label>day</ion-label>
<ion-datetime displayFormat="DD MM YY" placeholder="Leave empty to select today"></ion-datetime>
</ion-item>
<ion-button>
Save
</ion-button>
</form>
</ion-fab-list>
</ion-fab>
The fab list should still remain even when clicking on the fabs or components but instead close when clicked.