[Bug Report][3.6.9] VOverlay unable to locate target undefined

[xarenas107]

Environment

Vuetify Version: 3.6.9
Last working version: 3.6.8
Vue Version: 3.4.27
Browsers: Chrome 125.0.0.0
OS: Windows 10

Steps to reproduce

1. In v-overlay set prop contained

Expected Behavior

Open overlay

Actual Behavior

Throw error with message: Unable to locate target undefined

Reproduction Link

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

Other comments

It appears to be related to: #19947

[Mikrovolnovka]

I'll add the error text so others won't duplicate the issue:

Failed to execute 'appendChild' on 'Node': Only one element on document allowed.

[josephlbarnett]

Seeing a similar issue in unit tests of components that include v-dialogs , where it warns [Vue warn]: Unable to locate target undefined at <VOverlay ref=Ref< <ref *1> {... and then unit tests that open dialogs can't find the components inside the dialog (v-dialog is attach=true in the context of unit tests to allow the tests to find components which worked in vuetify 3.6.8 -- in the app itself the v-dialog is attach=false, and appears to work correctly fwiw)

[jflemingframe]

+1
VMenu 'attach' prop affected by this as well. Console error shows but it does seem to still work. https://play.vuetifyjs.com/#eNq1UUtuwjAQvcrIm4KEE4l20yggVe22JyAsjGOEhbEtZ5KCoty9EyeFhH1Xmc+b94l3LauCTD+8T5pasYzlqC7eCFTbwgLkpW5AGlFVm4KhuiKXyqIKBYtrAjT8omwNAlHIEzivLHeWn1yjwggh0B8nNLwyDjMhUTcCXSDWFnxwvoLuzjnyHtCCdCaCfNAXEW4FI4aDtmUc0RXdwBcVpfuxkKfx6CGbTrLchw03usK5VD/hmtBEf4yCi75bAUmp65I+0PckB9lZ3WgfFzPHcyKOGo3atm08TGIHXddbfMZMnEy3kxgzy33b//LhfVJ6IKqeouaVDNoPF+rqXUAo1VHUBqEdWEqBIoPFEjZbWIwzGEJmsHtYaiGazODl02h5hm/1At3qP/ewniL2Y9UtY9H1Ue/hWLdir8lbsn5nK1sbs/8Fl+XdMw==

This bit here seems to be a change that brought shadowdom stuff in. Not sure what that's about, but this looks to be what started affecting this.

v3.6.4...v3.6.9#diff-797e0d87fcc4e46ffbe545df7707d4565185aaa039c2f04eaf74a2539b3fc5baR159

packages/vuetify/src/components/VOverlay/VOverlay.tsx:159

about:srcdoc:168 DOMException: Failed to execute 'appendChild' on 'Node': Only one element on document allowed.
    at https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify-labs.esm.js:10619:21
    at ReactiveEffect.fn (

[ax-jstern]

In our app, this issue prevents menus from working for a period of time, after which they start to work again. I didn't find any particular rhyme or reason to when it would start working again, but we were seeing the same error as posted above. Not to add any pressure or anything, but just to help scope the impact: for us this will prevent any further upgrades to Vuetify until the bug is fixed.

[Tennyleaz]

I have errors in v-menu, when multiple v-menu could attach to a component. v-menus cannot show anymore.
Was working before 3.6.8.

<v-menu
    :model-value="isShowSubFunctionMenu"
    :location="tbLocation"
    :disabled="isMenuDisabled"
    :close-on-click="false"
    :close-on-content-click="false"
    persistent
    no-click-animation
    max-width="46"
    offset="10"
    transition="fade-transition"
    z-index="22"
    content-class="overflow-hidden elevation-4 fixedMenu"
    contained
    attach="#mainNav"
    scroll-strategy="reposition"
  >
  <template v-slot:activator="{ props }">
    ...
  </template>
  <div>
    ...
  </div>
</v-meun>

The browser console show this:

Uncaught (in promise) DOMException: Node.appendChild: Cannot have more than one Element child of a Document

Which is from teleport.ts line 29 targetElement.appendChild(container)

---

• Operating System: Windows_NT
• Node Version: v18.19.0
• Nuxt Version: 3.12.2
• CLI Version: 3.12.0
• Nitro Version: 2.9.6
• Package Manager: [email protected]
• Builder: -
• User Config: devtools, vite, app, css, modules, i18n, runtimeConfig, routeRules, devServer
• Runtime Modules: [email protected], @pinia/[email protected], @nuxtjs/[email protected], [email protected]
• Build Modules: -

---

[malopgrics]

Attach is broken with v-dialog too.

See this Vuetify Snips for reproduction

<v-dialog :attach="true">
  <template v-slot:activator="{ props }">
    <v-btn v-bind="props"> broken dialog (attach=true) </v-btn>
  </template>
  <template v-slot:default>
    <v-card title="Dialog">
      <v-card-text> attach=true </v-card-text>
    </v-card>
  </template>
</v-dialog>

[JoniLieh]

This also happens to the Misc > Advanced Showcase on the Vuetify webpage (Playground)

[Mikrovolnovka]

Hey @johnleider
Still happens in v3.6.10

Link: https://play.vuetifyjs.com/#eNqFVN1uqzAMfhWLXbBJzbpW59xUZTrn8jzDOk0phDZaSFBiaCfEux+TFAq007jg54v92f5s/NZEzqbLv2X5XFci2kRbFEWpOIrXnQbY1oyXpX/1H6nRyKUWFmSW7CJ3kpgehd1FFxNvVAhdAUfk6ZFsHpRJuRLsagsdgtJoOt0bRFMQZvLcCSSE/X4Z0RFhnxA88BRlzdFYMmugtKZ00E6Mffw96jECkCruHPmUZ7aG0ljMjZKGuSO3Uh/YntuPj1mWcDpKCrk3NhOW4VFq5sgpYwfLv8CaSmciY+oAGcuVOEOlKXuG4kw3y7XLjS2AK3kgP7SCOHfRNCnKU+pORF/H9HRSka9JkvKBr5MduUXSrK+rsOwXyaA3J7HfLoPxnMKVXF8dlHdompqrSrTtdtkdfxN15MQrND4QSVRbo1lmTvpuxA6kPoz7uBxN1giumZIOrz3i7OWO7E5QhIzbsfa3ne+YGPWtmEtN7SDu7gSkhu45Uxxg8ym+LjbPXpYbgz7FZooDOKFEiiLbeObgDUmSgH9bTM1pYKfAn1TJ9JN4H58geQ0+kIyofpqNoWqGEpUYN2y1nonUXU0TyIN1284IqXMzxpvODueT/gb8ugkI6FZBvz3oc1gfYbkQErbLbDa2LrWyRNIVq7B8ZNH9ttCAFfkCUlOUFekNLeTWFBDT6orDUFEEGqZeQ7J+jH0dq/jpeuz7T8c9z2NQ/i0kOrTX176B+F83Nqt46KNnJ/xCfMHby/O++/ob9wEP7u+UJf2MvnwqPGoXulLK397/AzxutN0=

[johnleider]

Because it hasn't been released yet.

[Mikrovolnovka]

Ok, I'm sorry, I didn't know the issue could be closed prior to release :)

[donalmurtagh]

Because it hasn't been released yet.

I was initially confused by this comment, but I think @johnleider is saying "this fix hasn't been released yet" not "v3.6.10 hasn't been released yet.

[MajesticPotatoe]

Tickets get closed when they are completed which is usually when a commit for that fixed the issue has been merged into master/dev. It becomes publicly available in the next patch/release.

e.g. The fix was committed to master ~20hrs ago, and will be available in the next patch(v3.6.11). v3.6.10 was released last week v3.6.11 has not been released yet thus the fix has not been released yet.

[jflemingframe]

Because it hasn't been released yet.

I was initially confused by this comment, but I think @johnleider is saying "this fix hasn't been released yet" not "v3.6.10 hasn't been released yet.

If you click on the commit that completed this fix, you'll see that its only in the master branch. When it's released you'll see other branches and version tag in that list.

[batyki]

sorry, but I don't think it's quite right in 3.6.10-master.2024-06-27

'a' || 'b' || (true) ? true : false = true but should be 'a'
so <v-overlay attach='#container' is ignored. I think parentheses should be used

VOverlay: useTeleport(computed(() => props.attach || props.contained || ( potentialShadowDomRoot.value instanceof ShadowRoot ? potentialShadowDomRoot.value ?? true : false ) ))

[johnleider]

sorry, but I don't think it's quite right in 3.6.10-master.2024-06-27

'a' || 'b' || (true) ? true : false = true but should be 'a' so <v-overlay attach='#container' is ignored. I think parentheses should be used

VOverlay: useTeleport(computed(() => props.attach || props.contained || ( potentialShadowDomRoot.value instanceof ShadowRoot ? potentialShadowDomRoot.value ?? true : false ) ))

attachand contained are booleans though.

27b4b1e#diff-797e0d87fcc4e46ffbe545df7707d4565185aaa039c2f04eaf74a2539b3fc5baR159

Whether it's attach, contained, or potentialShadowDomRoot, the condition, if true, will attempt to use the value of the shadowDom OR default to true if it's not available.

[batyki]

attachand contained are booleans though.

27b4b1e#diff-797e0d87fcc4e46ffbe545df7707d4565185aaa039c2f04eaf74a2539b3fc5baR159

Whether it's attach, contained, or potentialShadowDomRoot, the condition, if true, will attempt to use the value of the shadowDom OR default to true if it's not available.

sorry everything is fine! I was unable to reproduce my problem on the playground. the error is on my side

[KaelWD]

Whether it's attach, contained, or potentialShadowDomRoot, the condition, if true, will attempt to use the value of the shadowDom OR default to true if it's not available.

If attach or contained are set it uses potentialShadowDomRoot even if that isn't a ShadowRoot.