Menu position calculation incorrect when attached to custom element

I have a fullscreen dialog with some selects and other elements which use detachable components, e.g. v-menu. When the dialog needs to scroll it cause problem because the menu is attached to the root by default so it does not scroll with the select list. I tried to set the attach property on v-select to the .v-dialog element but in this case the position of the menu is not calculated correctly (it always gets top/left: 0).

Versions and Environment

Vuetify: Latest Vue: Latest stable Browsers: Chrome latest OS: Win7

Steps to reproduce

Click on Open Dialog and then open the select menu.

Expected Behavior

The menu should appear in the correct position.

Actual Behavior

The menu always appears in the top left corner.

Reproduction Link

Go to https://codepen.io/anon/pen/PBwpZz

---

Additional Comments:

If I set the attach prop to some non-existing element it sort of works because it seems then that the menu content is attached to the immediate parent, but still the position is not correct and this is an ugly workaround.

[Tofandel]

IMO the calculation for the position of the dropdown is invalid and buggy… It should find the first parent of the element to which it is attached and calculate it’s position relative to that element… Right now it wrongly assumes the v-app should be at a position of 0,0 on the page at all time, so if the v-app is contained in something it will calculate the position relative to the document instead of the v-app, so you will have a double offset effect and the dropdown will be far far away from where it should be…

Also you don’t always have control on the component props in libraries or other element that use a dropdown, resulting in a lot of invalid positioning that cannot be fixed…

This default behavior should be changed.

[KaelWD]

https://github.com/vuetifyjs/vuetify/issues/7703