How to hide popover on click inside popover?

[Rusinas]

I need to close popover after user clicks on some item in popover (e.g. site navigation)

[kai-yu]

Cannot you use directive v-close-popover on the desire node?

[nonsocode]

what if you have a custom component in the popover? how do you close the popover from within that component?

I propose that the popover slot be a scoped slot with a handle to the close function

[DimosPagakis]

@Rusinas @nonsocode
I am using a custom component inside the popover and I got it to work by doing the following.

Used the open property for the popover. Defaults to false so the popover is not open when the page is loaded
<v-popover :open="openGuests" offset="16" placement="bottom-start">

I added a custom trigger to open the popover by changing my boolean variable to true
<p @click="openGuests = true">

Inside the custom component that shows up in the popover, I emit an event to its parent.

click(){
 ... handle the click
 this.$emit('save')
}

Finally, on the page that I use the popover I handle the emitted event and set the boolean variable to false again.
<guests-filter @save="openGuests = false"></guests-filter>

I tested it and it works for multiple components I use inside the popovers

[DimosPagakis]

Well in this case I believe you could create a component that includes both the popover and the "button" that toggles it. That way you only have one variable and you just pass in props that make each component unique in the way you desire

…

On Thu, 6 Aug 2020, 22:53 TheMangoTrain, ***@***.***> wrote: @Rusinas <https://github.com/Rusinas> @nonsocode <https://github.com/nonsocode> I am using a custom component inside the popover and I got it to work by doing the following. Used the open property for the popover. Defaults to false so the popover is not open when the page is loaded <v-popover :open="openGuests" offset="16" placement="bottom-start"> I added a custom trigger to open the popover by changing my boolean variable to true <p @click="openGuests = true"> Inside the custom component that shows up in the popover, I emit an event to its parent. click(){ ... handle the click this.$emit('save') } Finally, on the page that I use the popover I handle the emitted event and set the boolean variable to false again. <guests-filter @save="openGuests = false"></guests-filter> I tested it and it works for multiple components I use inside the popovers Hmmm, doesn't this mean you need a tracking variable for each popover? Our app has +20, and that will probably triple in the future. — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <https://github.com/Akryum/v-tooltip/issues/420#issuecomment-670159885>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AFMYLKPYHTB3KQV6POMOCLDR7MC27ANCNFSM4JY4B7RA> .