"v-menu" appears as fixed if parent component is inside a scrolling container

I did my best to see if this has already been reported, but could find anything. I wouldn’t really call this an issue, I am more curious what your thoughts are on adding a prop to v-menu to avoid mounting to the root of the app, that way a menu can exist inside of a scrolling container also.

Could possible check for a prop in the mount method: (https://github.com/vuetifyjs/vuetify/blob/a79b018c557789b2cd4cf89ac3badbca40abd5fe/src/components/menus/Menu.js#L138)

Steps to reproduce

Put a <v-menu> inside of a component that has a overflow: auto or overflow-y: scroll

Versions

0.12.7

What is expected ?

The menu should “stick” to the activator that opens the menu, e.g. Dropdown, Select.

What is actually happening ?

If you place any component that has a <v-menu> inside of a parent component that is scrollable, the menu appears to be fixed and becomes “disconnected” from the activator

Reproduction Link

Click the “Dropdown” button and then start scrolling up or down. https://codepen.io/anon/pen/BZWOry

Thanks!!!

[nekosaur]

1. Use attach prop on v-menu

2. In the future, please create new issues instead of commenting on closed ones, or join our chat at https://chat.vuetifyjs.com to get help.

[codewp]

@nekosaur

I used attach prop for menu but it can not calculate right position for menu when menu is inside of v-bottom-nav

It opens menu under bottom-nav!

https://codepen.io/anon/pen/yEjwMr

Please let me know how can I solve this problem?