Vuetify: [Bug Report] v-menu: item in activator slot disappears when pushing route

[lukef]

EDIT: repro https://github.com/vuetifyjs/vuetify/issues/10578#issuecomment-612163991

Environment

Vuetify Version: 2.2.12
Vue Version: 2.6.11
Browsers: Chrome 80.0.3987.100
OS: Linux x86_64

Steps to reproduce

1. Add a v-menu like the following:

    <v-menu
      ref="date-picker"
      v-model="showingPicker"
      :close-on-content-click="false"
      offset-y
      max-width="290px"
      min-width="290px"
    >
      <template v-slot:activator="{ on }">
        <v-text-field
          v-model="dateFormatted"
          hint="MM/DD/YYYY format"
          persistent-hint
          :outlined="true"
          append-icon="mdi-calendar"
          @blur="updatedInputDate()"
          v-on="on"
        ></v-text-field>
      </template>
      <v-date-picker v-model="date" no-title @input="selectedCalendarDate()"></v-date-picker>
    </v-menu>

1. Navigate to another view via: this.$router.push('/somewhere').
2. The v-text-field element will disappear

Expected Behavior

The v-text-field element should not disappear

Actual Behavior

The v-text-field element will disappear

Other comments

Also, is it possible attach v-on to the @click:append-icon event?

[lukef]

I'll try to get a minimal reproduction up soon

[jacekkarczmarczyk]

This issue is being closed due to:

• [x] Reproduction environment not provided (inactivity for 14 days)
• [ ] Requested information not provided (inactivity for 14 days)
• [ ] Violation of the Code of Conduct

[zeroarst]

I am having this issue. Whenever route changed, the element in <template v-slot:activator="{ on }">...</> disappears..

[dannielhugo]

I am having this issue too. I've tried to reproduce on Codepen but It was unsuccessful :disappointed:
@lukef Have you succeeded with this issue reproduction?

[lukef]

We actually ended up swapping this component out but I will try to create a vanilla reproduction case this week. That said, I can tell you it is still happening in our code if I add the control back.

[nchan7]

@lukef were you able to recreate the issue? I am running into the same issue with the Timepicker component

[timaxxer]

I have actually have the same issue, All component wrapped in <template v-slot:activator="{ on }">...</> disappear before the route is unmounted.

[eikooc]

I think I found out a situation where it is happening, and how to solve it. At least in my case.

When the structure inside the <template v-slot:activator="{ on }"> ... </template> changes. The rendering breaks. So if you have a v-if inside that template that switches between different elements, it breaks.

Can somebody confirm this?

[timaxxer]

I tried to reproduce it and I found that I am not able to reproduce it only with Vuetify and vue-router. But I was able to reproduce it with nuxt. I dont know why within nuxt the problem is present.

I prepared a simple codesandbox to show this.

https://w63ms.sse.codesandbox.io/

Scenario:
By navigation from /about to home page, The dropdown button dissapear until the Home page is rendered completely.

@eikooc this is not look like to be related to structure inside template v-slot

@jacekkarczmarczyk Is it possible to investigate and maybe reopen the issue?

[jacekkarczmarczyk]

Your repro is not something we can debug (no source) @timaxxer

[timaxxer]

Sorry here is the link
https://codesandbox.io/s/vibrant-hermann-w63ms

[timaxxer]

The problem is related to the transitions feature on the router in nuxt.

By disabling the transitions feature in nuxt.config, the problem disappear. So hope this clue will help you find a solution to be able to enable transition on router and fix the problem in vuetify.

...
  features: {
    transitions: false
  },
...

[tiboradam]

Not 100% sure I'm using Vuetify's btn/menu for a confirmation "dialog" right, but here's my implementation and I get the same issue. There's another issue with the activator's width (in this case the button) being larger than the menu's. But that's not functional, right? :)

I think it's related to the variable changing on the activator v-if.
I've tried some simple combination. Feel free to experiment.

Made this codepen, hope it helps:
https://codepen.io/tiboradam/pen/qBOjMor

[tiboradam]

Can anyone suggest a solution to this? I'd be happy with a temporary, hacky one too. :)

[denis-ilchishin]

I have the same issue using pure Vue (not Nuxt). But not only with v-menu, but any component that has activator slot, such as, for example, v-tooltip. Everything within activator slot disappears before current route is unmounted. Unfortunately, I can't reproduce that on codepen as well.

[tiboradam]

Yeah, but I'm not using Nuxt. Where should I put that feature configuration?

On Fri, Jun 5, 2020 at 8:14 PM td-kallmon [e-mail] wrote:

@tiboradam https://github.com/tiboradam I tried @timaxxer
https://github.com/timaxxer 's fix (just above your comment) and it
worked for me.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/vuetifyjs/vuetify/issues/10578#issuecomment-639678908,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/AB4PNGV5ZSL43H364AFY74LRVEYWTANCNFSM4KVAYDZQ
.

[td-kallmon]

Yeah, I noticed after I commented that some others weren't using Nuxt, making that solution only workable for some. So I deleted my comment. Not fast enough :p

It's interesting that this setting in Nuxt will fix it, but there's no obvious way to change such a setting in Vuetify, at least not that I could find.

[jarkt]

Do you mean that disable transitions will fix it? It fixes nothing but due to an animation time of 0s it maybe doesn't appear. I use transitions, so it's not a solution for me. Or what was the mysterious deleted post?

[td-kallmon]

@jarkt You're absolutely right, it's not a fix, it's a bit of a hack. My original response was to someone who said they were willing to accept even a hack, so I pointed to an earlier comment I thought they might not have seen. But... well, yeah. My mistake, all around.

[augustinoMageka]

I added
{
features: {
transitions: false;
}
}
to my nuxt.config.js and yey it worked.

[tiboradam]

Good for ya. :)
What about in a Vue stack that doesn't have Nuxt.. like in my examples?

[maxiPool]

looking for a fix as well without nuxt

[yoldar]

I guess it is something related to the "transition". I got it above router-view:

vue:
<template lang="pug">
    v-app
      transition(name="fade")
          router-view

stylus:
// Fade annimation
.fade-enter-active, .fade-leave-active
  transition opacity .3s
.fade-enter, .fade-leave-to
  opacity 0

I increased fade animation to show you how menu disappears

[Thomas-lhuillier]

I had pretty much the same issue, I solved it by adding the attach prop on my v-menu.

<v-menu
  bottom
  left
  origin="top right"
  attach="">

Maybe it can also help here :)

[yoldar]

I had pretty much the same issue, I solved it by adding the attach prop on my v-menu.

<v-menu
  bottom
  left
  origin="top right"
  attach="">

Maybe it can also help here :)

Unfortunately didn't help ;( Which version of Vuetify you are using? Mine is 2.3.2

[mwgamble]

I'm seeing this issue with tooltip activators. It only happens when changing routes. I am using nuxt, and don't have the luxury of being able to turn off transitions.

[JulienAramino]

I have the same issue with v-btn in v-dialog with nuxt using
template(v-slot:activator="{ on, attrs }"),
is there a fix ? better than

features: {
transitions: false;
}

[eduardo76]

This problem is related to transitions aplied to routes and the use of v-slot:activador.
In my projects I use a app-bar with some buttons with tooltips.
Instead of using v-slot:activator, I have used the props activator in tooltips.
Example:
v-slot:activator

<v-tooltip bottom>   
  <template v-slot:activator="{ on, attrs }">  
    <v-btn color="primary" dark v-bind="attrs" v-on="on">
      Button
    </v-btn>
  </template>
  <span>Tooltip</span>
</v-tooltip>

Props activator

<v-btn id="bt_button" color="primary" dark>
  Button
  <v-tooltip bottom activator="#bt_button">
    <span>Tooltip</span>
  </v-tooltip>
</v-btn>

This problem can be seen in many others v-slot:activator, including v-menu.

[yoldar]

This problem is related to transitions aplied to routes and the use of v-slot:activador.
In my projects I use a app-bar with some buttons with tooltips.
Instead of using v-slot:activator, I have used the props activator in tooltips.
Example:
v-slot:activator

<v-tooltip bottom>   
  <template v-slot:activator="{ on, attrs }">  
    <v-btn color="primary" dark v-bind="attrs" v-on="on">
      Button
    </v-btn>
  </template>
  <span>Tooltip</span>
</v-tooltip>

Props activator

<v-btn id="bt_button" color="primary" dark>
  Button
  <v-tooltip bottom activator="#bt_button">
    <span>Tooltip</span>
  </v-tooltip>
</v-btn>

This problem can be seen in many others v-slot:activator, including v-menu.

Thanks! This solved problem!

[gangsthub]

As @eikooc commented I had this issue because the only child of <template v-slot:activator="{ on }"></template> had a v-if that was toggling it's visibility.

I solved it by wrapping the "activator button" (<my-button> in this example) in a div that is not bound to the v-if:

<v-menu
  v-model="isMenuOpen"
  v-bind="{...otherAttrs}"
>
  <template v-slot:activator="{ on }">
    <div>
      <my-button
        v-if="condition"
        @click="isMenuOpen = !isMenuOpen"
        v-on="on"
      >
        Some text
      </my-button>
    </div>
  </template>

  <v-card>Menu content...</v-card>
</v-menu>