<teleport v-if> with form input

[AjaiKN]

Version

3.0.0-rc.5

Reproduction link

https://codepen.io/Aurelius333/pen/VwaLvZR

Steps to reproduce

1. Wait for the page to fully load
2. Type something into the input
3. Press the "Cancel" button

What is expected?

The content should disappear because of the v-if.

What is actually happening?

The content does not disappear. Instead, I get this warning:

[Vue warn]: Unhandled error during execution of scheduler flush. This is likely a Vue internals bug. Please open an issue at https://new-issue.vuejs.org/?repo=vuejs/vue-next 
  at <App>

In Chrome, I get this error:

Uncaught (in promise) TypeError: Cannot read property 'parentNode' of null
    at remove (vue@next:7235)
    at performRemove (vue@next:5662)
    at remove (vue@next:5680)
    at Object.remove (vue@next:2317)
    at unmount (vue@next:5637)
    at patch (vue@next:4693)
    at componentEffect (vue@next:5248)
    at reactiveEffect (vue@next:391)
    at callWithErrorHandling (vue@next:1274)
    at flushJobs (vue@next:1427)

In Firefox, I get this error:

Uncaught (in promise) TypeError: child is null
    vue next:7235
    vue next:5662
    vue next:5680
    vue next:2317
    vue next:5637
    vue next:4693
    vue next:5248
    vue next:391
    vue next:1274
    vue next:1427
vue@next:7235:26

---

Doing any of the following seems to make this work and stop the error from happening:

• Removing the wrapping <form> element
• Removing the v-model on the <input>
• Not typing anything into the input before pressing the "Cancel" button
• Adding an @submit event handler to the <form>
• Adding a wrapping <div> around the <teleport>

[posva]

It works on Chrome and Safari. What browser are you using?

[AjaiKN]

@posva Thanks for your response!

I tried it on all of these browsers, and it's not working on any of them:

• Firefox 79.0; macOS 10.15.4
• Chrome 84.0.4147.105 (Official Build) (64-bit); macOS 10.15.4
• Safari 13.1; macOS 10.15.4
• Firefox 79.0; Windows 10
• Safari; iOS 13.6

I've been using the CodePen debug link: https://cdpn.io/Aurelius333/debug/VwaLvZR/bZrQWEzQVVVk

Did you type something into the input before clicking the "Cancel" button? It only seems to error if you type something into the input first.

[posva]

It does happen when typing!

[zhangzhonghe]

I am trying to fix it.

[m4heshd]

Facing the same issue. Should <teleport> target be in the base HTML? Can't the target be inside a parent component?
Currently need to check if the target is mounted before the teleport is performed.

[AjaiKN]

@m4heshd I think the <teleport> target is supposed to be outside the Vue app: see #992 (comment). I think maybe the docs could be more explicit about that, though.

The target element cannot be a part of the same component... It needs to be outside of <div id="app">.

[m4heshd]

@Aurelius333 I realized that minutes after posting the above. I agree. Docs should mention that. Either way I'm still using <teleport> inside #app with mounted validation for the root component. Works perfectly fine.

In my case, there's no alternative because I'm writing an Electron app that has a title bar which lives inside the #app. App functionality breaks if I cover that. I don't like writing hacky calc CSS either. In my opinion, <teleport> should function like that in default. It's mostly useless without that support. I know It's such a common issue since anywhere the <teleport> feature is introduced, people are complaining about this more than appreciating it. It's such a great feature lacking such essential and obvious functionality.