Draft not cleared after posting reply #413

New issue

Open

opened 2024-09-16 16:56:43 +00:00 by novenary · 1 comment

novenary commented

2024-09-16 16:56:43 +00:00

Opening this with debugging information because I'm not sure how to fix it yet.

Bisect shows this was regressed by a7dea2f70f. I've tracked it down to this change introduced in Vue 3.3.11.

Relevant code:

   watch: {
     'newStatus': {
       deep: true,
       handler () {
         this.statusChanged()
       }

     clearStatus () {
       const newStatus = this.newStatus
       this.newStatus = {
         status: '',
         spoilerText: '',
         files: [],
         visibility: newStatus.visibility,
         contentType: newStatus.contentType,
         language: newStatus.language,
         poll: {},
         mediaDescriptions: {}
       }

After clearStatus wipes the value of newStatus, the watcher never fires.

As far as I can tell, the new behavior is intentional: posting a reply eventually causes the form to be destroyed, so even though the reactive change is likely queued up, it doesn't end up being dispatched.

Workarounds I've attempted:

as suggested by this documentation change, setting flush: 'sync' on the watcher does help, but I don't think it's a good idea since it would prevent rate-limiting while typing?
manually calling statusChanged() after setting newStatus; this feels kinda hacky? it'd probably be better if there was a way to manually flush the watcher instead...

Willing to send a PR, pointers appreciated. 💜

Opening this with debugging information because I'm not sure how to fix it yet. Bisect shows this was regressed by a7dea2f70f2beba781068a7ff7d8a2a9ef8a9478. I've tracked it down to [this change](https://github.com/vuejs/core/issues/7181) introduced in Vue 3.3.11. Relevant code: https://akkoma.dev/AkkomaGang/akkoma-fe/src/commit/a7dea2f70f2beba781068a7ff7d8a2a9ef8a9478/src/components/post_status_form/post_status_form.js#L331-L336 https://akkoma.dev/AkkomaGang/akkoma-fe/src/commit/a7dea2f70f2beba781068a7ff7d8a2a9ef8a9478/src/components/post_status_form/post_status_form.js#L345-L356 After `clearStatus` wipes the value of `newStatus`, the watcher never fires. As far as I can tell, the new behavior is intentional: posting a reply eventually causes the form to be destroyed, so even though the reactive change is likely queued up, it doesn't end up being dispatched. Workarounds I've attempted: - as suggested by [this documentation change](https://github.com/vuejs/docs/commit/80e2128d52603856a26a8bb7258606cfe80561e9), setting `flush: 'sync'` on the watcher does help, but I don't think it's a good idea since it would prevent rate-limiting while typing? - manually calling `statusChanged()` after setting `newStatus`; this feels kinda hacky? it'd probably be better if there was a way to manually flush the watcher instead... Willing to send a PR, pointers appreciated. 💜

novenary commented

2024-09-16 19:41:24 +00:00

Author

Okay, so it turns out the warning about batching is only relevant for events that happen at the same time, and it won't meaningfully debounce user input (even with fast typing/key mashing I'm seeing the handler fire for every single key press). I'll submit synchronous flush as the correct fix.