Collaborative Task Items Not Updating State Across Users

[sr-kevin]

What’s the bug you are facing?

Checking and unchecking task items within a collaborative document does not seem to update its state in other connected users documents.

Which browser was this experienced in? Are any special extensions installed?

Tested in both up to date versions of Chrome and Firefox with no extensions installed.

How can we reproduce the bug on our side?

Bug can be easily reproduced in the example collaborative editor on your main web page https://tiptap.dev/

https://user-images.githubusercontent.com/87660590/180489007-f4186e33-8fa6-46c8-9769-1bd0317341e7.mp4

1. Connect to matching example rooms on 2 separate users.
2. Create a few task item nodes as user 1.
3. Attempt to check / uncheck the task items on user 2.
4. Also check / uncheck a few on users 1 as well.
5. You'll eventually notice the task item state becomes de-synced between both users.

Can you provide a CodeSandbox?

No response

What did you expect to happen?

Task Item checked state is displayed in sync across users.

Anything to add? (optional)

Originally noticed the issue on our own implementation of a collaborative tiptap editor and figured something was wrong on our end, but then I noticed the same issue in your example collaborative editor as well as in other applications using tiptap.

Debugged a tiny bit and here's a few things I noticed which may help track down the issue:

• Changing the task items checked state is broadcasting document updates as expected.
• Connected users docs seem to be applying the update correctly. Doing a toJSON() output of the ydoc shows the updated task item checked attribute.
• Even the checkbox input node in the DOM is getting its checked attribute updated, but the actual editor doesn't seem to be updating / rendering the changed state.

Did you update your dependencies?

• [X] Yes, I’ve updated my dependencies to use the latest version of all packages.

Are you sponsoring us?

• [X] Yes, I’m a sponsor. 💖

[gustavotoyota]

The same thing happened here and the fix was simple.

I just replaced this part of task-item.ts:

if (updatedNode.attrs.checked) {
  checkbox.setAttribute('checked', 'checked')
} else {
  checkbox.removeAttribute('checked')
}

With this:

checkbox.checked = updatedNode.attrs.checked;

It looks like the way setAttribute and removeAttribute are being used is unstable somehow.

[mrgeorgegray]

thanks @gustavotoyota that seems to work well for me testing locally, have you suggested a PR with this change already?

[github-actions[bot]]

This issue is stale because it has been open 45 days with no activity. Remove stale label or comment or this will be closed in 7 days

[bkempe]

This issue has a fix https://github.com/ueberdosis/tiptap/issues/3019#issuecomment-1204261082 and should probably not be stale.