Style applied to removed element in NodeView can end up applied to different element?

1

I have some code like this inside a NodeView. We use TipTap but I don’t think it should be affecting this problem.

deleteButton.addEventListener('click', () => {
  if (typeof getPos === 'function') {
    listItem.classList.add('executingDeletion');

    // Remove checkbox after short period to allow fade to display
    setTimeout(() => {
      const position = getPos();
      const $pos = editor.view.state.doc.resolve(position);
      editor.commands.deleteTaskItemOrListAtPosition($pos);
        listItem.classList.remove('executingDeletion'); // TODO: Sometimes the next item has the classList applied to it. I don't know why or how (hard to reproduce except on iOS)
    }, 75); // Timeout must match transition-duration in CSS
  }
});

// ...
return {
        dom: listItem,
        contentDOM: content,
        ignoreMutation: mutation => {
          // Allow adding our custom classes
          if (ALLOWED_ATTRIBUTE_NAME_CHANGES.has(mutation.attributeName))
            return true;
        },
      };

I wish I had an easy way to repro this but I only have an ancient iPhone I hardly know how to use, and otherwise this is extremely difficult to reproduce.

2

I’m not sure about that. As a general rule, I’m not going to debug issues that directly involve libraries I didn’t write. But if you can reproduce this with plain ProseMirror somehow, I could take a look.

1 Like