Comments (17)
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>
from vuetify.
Because it hasn't been released yet.
from vuetify.
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.
from vuetify.
Ok, I'm sorry, I didn't know the issue could be closed prior to release :)
from vuetify.
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.
from vuetify.
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.
from vuetify.
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)
from vuetify.
+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 (
from vuetify.
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: -
from vuetify.
This also happens to the Misc > Advanced Showcase on the Vuetify webpage (Playground)
from vuetify.
Hey @johnleider
Still happens in v3.6.10
from vuetify.
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.
from vuetify.
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.
from vuetify.
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 ) ))
from vuetify.
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.
from vuetify.
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
from vuetify.
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.
from vuetify.
Related Issues (20)
- [Feature Request] [VDateInput] support different date formats
- [Bug Report][3.6.13] Autocomplete Expand/Collapse Results Not Keyboard Accessible HOT 1
- [Feature Request] When creating a virtual component, inherit its defaults, which has already been redefined. HOT 1
- [Bug Report][3.6.13] When I bind a value in text-filed or select component with readonly prop, label does not go up HOT 1
- [Feature Request] v-treeview with append-icon HOT 5
- [Feature Request] VCombobox multiselect inline values HOT 1
- [Bug Report][3.6.13] v-data-table does not select row with item-value returning an object
- [Bug Report][3.6.13] ripple custom color is not applied in VBtn
- [Bug Report][3.6.13] overlays activator parent value not working HOT 1
- [Feature Request] Better Naming Scheme for Slot Props HOT 1
- [Feature Request] Textarea with auto grow needs max rows HOT 1
- [Bug Report][3.6.13] VSnackbar timer not updated when timeout changes HOT 1
- [Feature Request] [VDatePicker] Change week names via prop HOT 2
- [Bug Report][3.6.13] Inputs base-color isn't take into account when the input is disabled
- [Bug Report][3.6.10] Group item doesn't auto expand on opening the drawer
- [Feature Request] [VTimePicker] Allow time picker to update v-model if only hours was changes HOT 4
- [Bug Report][3.6.13] Table headers are not fixed
- [Bug Report][3.6.13] TypeError: Cannot read properties of null (reading 'insertBefore') when adding vuetify to an existing project HOT 5
- [Bug Report][3.6.13] send empty request HOT 1
- [Bug Report][3.6.13] send empty request HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from vuetify.