tiptap: Toggling taskitems does not work with a password manager installed

What’s the bug you are facing?

When trying to click a task item on or off, it causes an Index out of range error.

Uncaught RangeError: Index 1 out of range for <taskList(taskItem(paragraph("A list item")), taskItem(paragraph("And another one")))>
    at F.child (vendor.002315f8.js:5:26758)
    at F.findIndex (vendor.002315f8.js:5:27443)
    at Te.nodeAt (vendor.002315f8.js:5:40926)
    at index.091b6c06.js:1:2515
    at tabindex.c5bf3f04.js:3:1741
    at Object.command (tabindex.c5bf3f04.js:3:24340)
    at HTMLInputElement.<anonymous> (index.091b6c06.js:1:2476)

How can we reproduce the bug on our side?

Navigate to the TaskItem extension page: https://tiptap.dev/api/nodes/task-item
With dev tools open, attempt to toggle a task item in the example.

What did you expect to happen?

Expect the TaskItem to toggle on and off.

Did you update your dependencies?

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

Are you sponsoring us?

Yes, I’m a sponsor. 💖

About this issue

Original URL
State: closed
Created 2 years ago
Comments: 18 (7 by maintainers)

Most upvoted comments

@pkkid @bdbch I have a solution that retains the <input> element and resolves the Bitwarden issue. Been a long day, I’ll post what I’ve done in the morning. FYI I’m in Australia.

clibu on Apr 25, 2022

@pkkid @bdbch @rfgamaral From what I can see Bitwarden has now fixed this issue. I was seeing an issue with my work-around where the checkbox and strikethrough were out of sync which got me to revisit this.

Also see: https://github.com/bitwarden/clients/issues/725

I am seeing an issue with the Tiptap code + YJS where changing the taskitem state on the first item in a list changes the strikethrough but not the checkbox on another device. Taskitems after the first work as expected.

clibu on Feb 23, 2023

Thanks @clibu

I have a little bit on the pipeline right now but I’ll check out your solution as soon as I find some time!

bdbch on May 13, 2022

Here is a proof of concept that works without using an input element. I’m happy using a modified extension while other people fight to get the password manager apps to fix their bug. Surprisingly the code is simpler as it can use the li state as the source of truth rather than syncing the input state and li state. It however does require the developer style the span to look like an input on their own. - https://codesandbox.io/s/tiptap-task-items-qm797u?file=/src/task-item.cjs.js

pkkid on Apr 12, 2022

The question coming from this is - if browser extensions are breaking a library, is it the libraries responsibility to handle extensions fiddling with the libraries functionality?

If you take a look into the source code: https://github.com/ueberdosis/tiptap/blob/main/packages/extension-task-item/src/task-item.ts#L107

There is not a lot of magic happening here. If for example the password manager extension is adding custom nodes to input elements (for example input[type=“checkbox”] that could lead to problems with prosemirror and it’s getPos method since the positions are all mixed up.

I guess it’s really on the extension developers side to ignore input fields that are inside contenteditable elements.

bdbch on Apr 12, 2022

It’s unfortunate that TaskItems will not work if a password manager is installed.

I don’t know much about the root cause of this issue, but I don’t think this happens with all password manager extensions out there.

This issue is a weird one because on one hand you want to say this is a Bitwarden and Enpass bug that they need to fix on their end.

I’m of the opinion that this should be fixed by them, I even opened an issue about it for Enpass here (I’m actually in the process of migrating to Bitwarden, and it sucks to see that it has the same problem). A browser extensions should never break a website like this. Maybe you could open a similar issue for Bitwarden (minus the ranting 😅)?

rfgamaral on Apr 11, 2022