Strange caret behaviour around block level leaf-node

1

I’m adding some embedded ‘widgets’ to my PM app. The NodeSpec is pretty simple:

{name: 'widget', group: 'block', toDOM: () => ['div', {class: 'widget'}]}

For these I have a NodeView, which for now just renders a simple div, and uses selectNode and deselectNode to add a blue outline.

I’m seeing weird behaviour with the caret when selecting widgets. With certain documents, if I click to select a widget I see the caret blinking in the block before or after the widget.

For example (() is the widget, [()] is the widget selected, and | is the caret)

One
()
Two
[()]
|Three      <--- Caret is blinking here. Why?

Note that the caret isn’t ‘really’ there. If I type, I type over that second selected widget, and the ‘Three’ paragraph is unchanged.

I’ve seen that the ‘Dinos in the document’ example doesn’t have this problem, but the dinos are inline nodes, not block level.

Is there a fix for this?

2

Update: I’ve noticed that if the div rendered by the nodeView is empty, I still see the caret in that odd position, but only for a moment and then it disappears. If the div has any content, the caret stays there as described above.

3

I’m guessing this might be the same Chrome bug as in

I just discovered the CSS property caret-color which gives a hacky but effective workaround - set the caret to transparent in selectNode and back to visible in deselectNode.

Not a solution for the problem in that thread, but works for my situation.