New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[Bug Report] v-tooltip and v-dialog activator element is removed on beforeDestroy, creating a disorienting effect #7422
Comments
I have the same problem with v-bottom-sheet activator button |
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. |
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. |
Same problem here, I can't use a transitions between elements with tooltips. |
For now, using the From:
To:
|
Hi, I've found a way to fix this effect on beforeDestroy hook for 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> |
Because content in activators is destroyed before the out transitions See vuetifyjs/vuetify#7422
Because content in activators is destroyed before the out transitions See vuetifyjs/vuetify#7422
Reference: |
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)
The text was updated successfully, but these errors were encountered: