How to close ion-fab with Ionic 5 and vue?

Ionic Framework
1

Hello, i’m trying to close the ion-fab menu when i click outsideof it.
The component’s doc says there’s a method “close” to close an oppened fab.
Seems simple enough. Yet I can’t find a way to call that method and there’s not a single example on how to do it.
I’ve been trying to do it the standard way by using a ref to the fab and call its close method but i get an error that “close isnt a function”, and indeed, there is no close method declared anywhere if i dig the source of the fab element or list it’s field with a “for in” loop.

I’ve been stuck on this for a whole day and this is driving me crazy to be stuck on something that should be so trivial, I feel like i’ve been searching the whole web in hope of a basic example but everything I found is either out of date or for angular.

i’m using ionic/vue@5.6.13

Has anyone got this problem and found a workaround ?
Is there actually a close method for the fab vue component ? How to call it then ?

here’s what i’m trying to do :

Template

<ion-fab ref="theFab">
.....
</ion-fab>

Typescript

export default defineComponent({
  setup(){
    const theFab= ref<null | {
      close: () => null;
    }>(null)

    const onClickingOutside = () => {
      theFabRef.value.close() // <====== error, close is not a function, value is not null and a correct reference to the fab component, i can list its props
    }

    return {
      theFab,
      onClickingOutside
    }
  }
})

Many thanks.

2

You need to do the following (see here):

theFabRef.value.$el.close()
1 Like
3

Thank you very much !