[BUG] "text-change" event not emitted properly

I’m using vue3-quill as a wrapper around quill editor for my vue3 application.

Out of the blue, the component stopped emitting an event when the text content of quill editor changes. Inspecting the code of vue3-quill, I noticed the problem is that the inner instance of quill isn’t emitting the text-change event.

The event is however emitted correctly when one of the following keys are pressed: enter, space, delete. Other keys don’t trigger the event.

I made this repo to reproduce the error. You can just npm run serve it and try and type something in the editor. You’ll see the text isn’t displayed below, but if you type enter, space, or delete, you’ll see the text correctly updated.

I’ll add that this started happening today, or at least went unnoticed by my team and me until now. What’s going on?

[luin]

Thanks for the updates! After a bit of hard debugging, I found a way to reproduce it 100%. However, this issue only triggers when devtools is open, so I’m not quite sure if this is the problem you were having. Any feedbacks are welcome!

To reproduce:

1. Open a page that contains a Quill instance.
2. Open devtools and set a breakpoint to the callback function of parchment/scroll.ts’s mutation observer.
3. Type a char to trigger the breakpoint.
4. Refresh the page.

From now on, any mutation observers won’t work on this tab, even if you do hard refreshes. Only opening a new tab solves the issue.

Screencast (using the repo provided by @samul-1):

https://user-images.githubusercontent.com/635902/189476545-649c4921-097b-47b8-a150-bff08a29b08a.mp4

Obviously, this is a bug on Chrome side and it was only introduced in recent Chrome versions. So there are nothing we can do on Quill side.

[cleverplatypus]

Thanks. It definitely seems that debugging it … breaks it 😃

Oh, the fun.