Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[Bug Report] Menu opens in the wrong area via v-model if activator is hidden, opens in correct spot after activator use when absolute

See original GitHub issue

Versions and Environment

Vuetify: 1.5.11 Vue: 2.6.10 Browsers: Firefox 66.0 OS: Ubuntu undefined

Vuetify Menu Issue 001

Steps to reproduce

Setup a menu that has an activator AND opens with a v-model. But the activator is hidden
Activate menu and unhide activator at the same time. Menu will open to the far left
If the menu is now opened with the activator, it will open in the correct spot from now on

Expected Behavior

It opens based on where the activator is on the first v-model based activation.

Actual Behavior

It opens to the far left.

Reproduction Link

https://codepen.io/anon/pen/EJwmdw?editors=1010

Comments

My example isn’t perfect, but it shows the behavior I’m trying to highlight. It’s especially odd as it opens in the correct place (through v-model) AFTER being opened via the activator, but not before.

Issue Analytics

State:
Created 4 years ago
Reactions:1
Comments:6 (1 by maintainers)

Top GitHub Comments

1reaction

KaelWDcommented, Apr 18, 2019

Fix is to open the dialog after the activator is visible, and you also need to not use absolute if you aren’t setting the position manually: https://codepen.io/anon/pen/ZZxGBm?editors=1010

Either that or don’t use the activator slot and just set the position yourself every time: https://vuetifyjs.com/en/components/menus#absolute-position-without-activator

0reactions

douglasg14bcommented, Apr 19, 2019

Oh I see.

This is because the entire button is replaced on the animation.

If I put the animation over just the icon this no longer occurs.

Scratch my above statement!

Top Results From Across the Web

Adding a new todo form: Vue events, methods, and models

We now have sample data in place, and a loop that takes each bit of data and renders it inside a ToDoItem in...

Card component — Vuetify

The v-card component is a versatile component that can be used for anything from a panel to a static image. The card component...

Vuetify v-menu leaves dropdown open after dialog appears

the problem is if the list item is the activator then it must be open until the dialog is open. my solution would...

SWE201c Flashcards - Quizlet

Study with Quizlet and memorize flashcards containing terms like Which of the following software development models can best respond to requirements changes ...

IBM SPSS Neural Networks 26

The multilayer perceptron (MLP) or radial basis function. (RBF) network is a function of predictors (also called inputs or independent variables) that minimize ......