Vuetify: [Bug Report] v-tooltip and v-dialog activator element is removed on beforeDestroy, creating a disorienting effect

[rlindskog]

Versions and Environment

Vuetify: 1.5.14
Vue: 2.6.10
Browsers: Chrome 74.0.3729.169
OS: Mac OS 10.14.4

Steps to reproduce

Create a v-tooltip and change routes away from the component.

Expected Behavior

The activator element should get destroyed at the same time as every other element

Actual Behavior

The element is destroyed before the rest of the elements

Reproduction Link

https://codesandbox.io/s/codesandboxnuxt-e992r

Other comments

This is especially noticeable when transitioning to pages with a lot of elements (news feeds, images, etc)

[filipwronski]

I have the same problem with v-bottom-sheet activator button

[mrjackwills]

I am having the same, or a very similar issue, with a date picker text field.

I have a fade transition applied to router-view, and during the transition from a page with a date-picker text-field, the text field disappear.

Please see this code pen for a basic example, the transition has been slowed down to one second so that one can clearly see the text-field disappearing during the router-view transition.

Simply go to the text-field route, then click the home button to navigate back to the home page.

https://codepen.io/mrjw/pen/XWrRZWv

[johnleider]

This is unfortunately not something we can solve. You can assign an arbitrary length of a transition but detachable still needs to destroy the element and it doesn't know how long that is.

As I feel there is no meaningful fix that we could provide, I'm going to close this issue. If you come up with an adjustment that makes this viable, feel free to create a PR. Thank you!

If you have any additional questions, please reach out to us in our Discord community.

[KaelWD]

I'm having this problem too, but without a transition - v-if/v-else on an element with and without the tooltip overlap:

[alfredo-baquedano]

Same problem here, I can't use a transitions between elements with tooltips.

https://codepen.io/alfredo-baquedano-campos/pen/YzKBKJo

[Vercadium]

For now, using the activator prop rather than the activator slot can avoid many of the symptoms of this issue (broken transitions etc). For example:

_From:_

<v-menu>
  <template v-slot:activator="{ on }">
    <v-btn v-on="on">Change</v-btn>
  </template>
  <!-- Content -->
</v-menu>

_To:_

<v-btn id="change-button">Change</v-btn>

<v-menu activator="#change-button">
  <!-- Content -->
</v-menu>

[dyurkavets]

Hi, I've found a way to fix this effect on beforeDestroy hook for [email protected] (the same way can be fixed for [email protected], but with a little bit more efforts to override render logic):

import Vue from 'vue'

import VDialog from 'vuetify/lib/components/VDialog'
import VMenu from 'vuetify/lib/components/VMenu'
import VTooltip from 'vuetify/lib/components/VTooltip'

const fix = (Component, inlineClassName = 'd-inline') => ({
    extends: Component,
    methods: {
        genActivator() {
            const activatorNode = Component.options.methods.genActivator.call(this)
            this.activatorNode = []
            return activatorNode
        }
    },
    render(h) {
        const vnode = Component.options.render.call(this, h)
        vnode.data.class[inlineClassName] = true
        return vnode
    }
})

// override
Vue.component('v-dialog', fix(VDialog, 'v-dialog__container--attached'))
Vue.component('v-menu', fix(VMenu, 'v-menu--attached'))
Vue.component('v-tooltip', fix(VTooltip, 'v-tooltip--attached'))

// or define separate components and use them in places where you want to avoid this disappearing effect
Vue.component('v-dialog-inline', fix(VDialog, 'v-dialog__container--attached'))
Vue.component('v-menu-inline', fix(VMenu, 'v-menu--attached'))
Vue.component('v-tooltip-inline', fix(VTooltip, 'v-tooltip--attached'))

<template>
    <v-container>
        <v-dialog-inline>
            <template #activator="{ on: menu }">
                <v-tooltip-inline top>
                    <template #activator="{ on: tooltip }">
                        <v-btn v-on="{ ...tooltip, ...menu }">dialog</v-btn>
                    </template>
                    <span>Tooltip</span>
                </v-tooltip>
            </template>
            <v-card>
                <v-card-title>Title</v-card-title>
                <v-card-text>Text</v-card-text>
            </v-card>
        </v-dialog>
        <v-menu-inline offset-y>
            <template #activator="{ on: menu }">
                <v-tooltip-inline top>
                    <template #activator="{ on: tooltip }">
                        <v-btn v-on="{ ...tooltip, ...menu }">menu</v-btn>
                    </template>
                    <span>Tooltip</span>
                </v-tooltip>
            </template>
            <v-list>
                <v-list-item v-for="i in 10" :key="i">List item {{ i }}</v-list-item>
            </v-list>
        </v-menu>
    </v-container>
</template>