[Bug Report][3.1.4] Elements with overlays not present in DOM initially attached to wrong overlay containers

[luka-mikec]

Environment

Vuetify Version: 3.1.4
Vue Version: 3.3.0-alpha.4
Browsers: Chrome 109.0.0.0
OS: Linux x86_64

Steps to reproduce

1. Open the reproduction link
2. Click "Change attach target (click me first)"
3. Click "Show v-select (click me second)"
4. Click on the v-select that has just appeared

Expected Behavior

The v-select's menu is visible. Changing attach target should only affect the v-menu, but not the v-select, which is a completely unrelated component in this code.

Actual Behavior

The overlay belonging to v-select is teleported to the v-menu's overlay. As the v-menu's attach target has display: none;, the v-select's list is not shown.

Reproduction Link

https://play.vuetifyjs.com/#...

Other comments

Maybe has something to do with this line:

vuetify/packages/vuetify/src/composables/teleport.ts

Line 24 in 8275c89

let container = targetElement.querySelector('.v-overlay-container')

It seems to always pick the first .v-overlay-container in the DOM, but it might not be the desired one. Note that it seems important that the attach target has changed before showing the new element (v-select in this case), otherwise it works as expected.

[KaelWD]

#16409

@nekosaur I guess that answers your WeakMap question.