[Resolved] v0.15.4 QFabAction Prevent Closing of QFab When Clicked

[snowdrop]

Good day. Is there any way to prevent closing of QFab when any of the QFabAction is clicked? I’ve tried @click.stop=method(), @click.prevent=method(), and @click.stop.prevent=method() but to no avail.

I don’t know if this behavior is inline with Material Design specs but it might be helpful for some users to have a property that can toggle the functionality of closing the QFab on click of QFabAction since you don’t need to click the QFab everytime you want to click on a QFabAction. Thanks!

[snowdrop]

Done. What I did was to use the combination of @hide event and show() method of QFab. The code snippet looks like this:

<q-fab
    ref="fab"
    color="purple"
    icon="keyboard_arrow_up"
    direction="up"
    v-model="fabOpen"
    @hide="preventFabHide()">

    <q-fab-action color="secondary" icon="search"/>
</q-fab>
...
methods: {
   preventFabHide () {
      this.$refs.fab.show()
   }
}

I hope it can help anyone having the same issue. One problem is that the fab won’t be hidden anymore. Thanks!

[hpawar]

Can still hide the fab like this

<q-fab
ref=“fab”
flat
direction=“down”
icon=“more_vert”
text-color=“white”
class=“fixed gt-sm mapv4-navmenuDesktop z-top”
v-model=“showFab”
@hide=“preventFabHide”>
<q-fab-action color=“secondary” icon=“search”/>
</q-fab>

preventFabHide (ev:any) {
if(ev){
this.showFab = !this.showFab;
}
else{
this.$refs.fab.show() // OR BELOW for ts
(this.$refs.fab as Vue & { show: () => boolean }).show()
}
}