Component inside <Transition> renders non-element root node that cannot be animated #1944

Closed
opened 2022-07-15 16:40:32 +00:00 by andreymal · 7 comments
Contributor

Every time I click to a task on the Kanban view, the following error occurs:

Component inside <Transition> renders non-element root node that cannot be animated. 
Proxy { <target>: {…}, <handler>: {…} }
 app warnHandler main.ts:92:10
    errorHandler main.ts:92
    (promise callback)
    // ...
    finalizeNavigation vue-router.mjs:3307
    pushWithRedirect vue-router.mjs:3180
    (Асинхронный: promise callback)
    pushWithRedirect vue-router.mjs:3151
    push vue-router.mjs:3078
    openTaskDetail kanban-card.vue:131
    _sfc_render/_cache[0]< kanban-card.vue:10
Every time I click to a task on the Kanban view, the following error occurs: ``` Component inside <Transition> renders non-element root node that cannot be animated. Proxy { <target>: {…}, <handler>: {…} } app warnHandler main.ts:92:10 errorHandler main.ts:92 (promise callback) // ... finalizeNavigation vue-router.mjs:3307 pushWithRedirect vue-router.mjs:3180 (Асинхронный: promise callback) pushWithRedirect vue-router.mjs:3151 push vue-router.mjs:3078 openTaskDetail kanban-card.vue:131 _sfc_render/_cache[0]< kanban-card.vue:10 ```
Author
Contributor

The keyboard shortcuts popup shows a similar error (but not sure if this is related to this issue)

Component inside <Transition> renders non-element root node that cannot be animated. 
Proxy { <target>: {…}, <handler>: {…} }
 app warnHandler main.ts:92:10
    errorHandler main.ts:92
    (promise callback)
    keyboardShortcutsActive index.ts:81
    0 TheNavigation.vue:72
The keyboard shortcuts popup shows a similar error (but not sure if this is related to this issue) ``` Component inside <Transition> renders non-element root node that cannot be animated. Proxy { <target>: {…}, <handler>: {…} } app warnHandler main.ts:92:10 errorHandler main.ts:92 (promise callback) keyboardShortcutsActive index.ts:81 0 TheNavigation.vue:72 ```
konrad added the
kind/bug
label 2022-07-18 13:30:56 +00:00
Owner

It seems like this error always occurs when vue components are placed in a <Transition> element.

It seems like this error always occurs when vue components are placed in a `<Transition>` element.
Owner

Looks like transitions need a single child node: https://stackoverflow.com/a/68561753/10924593

Looks like transitions need a single child node: https://stackoverflow.com/a/68561753/10924593
Owner

Removed these broken transitions in c2d5370e4a - they were not working at all anyway. I think we need a better solution for these, but that's an issue for another day.

cc @dpschen

Removed these broken transitions in https://kolaente.dev/vikunja/frontend/commit/c2d5370e4a88fc646dccd3c598c2953b6b40ca82 - they were not working at all anyway. I think we need a better solution for these, but that's an issue for another day. cc @dpschen
Member

The transition wrapper that you removed were correct afaik.

The problem with the transitions was that some components use a transition as their first child. This makes a transition a child of a transition.

See: https://kolaente.dev/vikunja/frontend/src/branch/main/src/components/misc/modal.vue#L3

and than e.g.:

https://kolaente.dev/vikunja/frontend/src/branch/main/src/components/sharing/linkSharing.vue#L160
or
https://kolaente.dev/vikunja/frontend/src/branch/main/src/components/sharing/userTeam.vue#L116

Which of our components do have multiple root children?

The transition wrapper that you removed were correct afaik. The problem with the transitions was that some components use a transition as their first child. This makes a transition a child of a transition. See: https://kolaente.dev/vikunja/frontend/src/branch/main/src/components/misc/modal.vue#L3 and than e.g.: https://kolaente.dev/vikunja/frontend/src/branch/main/src/components/sharing/linkSharing.vue#L160 or https://kolaente.dev/vikunja/frontend/src/branch/main/src/components/sharing/userTeam.vue#L116 Which of our components do have multiple root children?
Author
Contributor

Same error when deleting a task

Component inside <Transition> renders non-element root node that cannot be animated. 
Proxy { <target>: {…}, <handler>: {…} }
 app warnHandler main.ts:92:10
    errorHandler main.ts:92
    (promise callback)
    35 TaskDetailView.vue:392
    invoker runtime-dom.esm-bundler.js:369
Same error when deleting a task ``` Component inside <Transition> renders non-element root node that cannot be animated. Proxy { <target>: {…}, <handler>: {…} } app warnHandler main.ts:92:10 errorHandler main.ts:92 (promise callback) 35 TaskDetailView.vue:392 invoker runtime-dom.esm-bundler.js:369 ```
Owner

Fixed in 56147dc9fb

Fixed in 56147dc9fbed5680a06de200dbd9111d92b5cf6f
Sign in to join this conversation.
No Milestone
No Assignees
3 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: vikunja/vikunja#1944
No description provided.