Vue-next: <teleport v-if> with form input

Created on 8 Aug 2020  路  4Comments  路  Source: vuejs/vue-next

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>
bug

Most helpful comment

I am trying to fix it.

All 4 comments

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

@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.

It does happen when typing!

I am trying to fix it.

Was this page helpful?
0 / 5 - 0 ratings