Caret Position Invisible

We are using ProseMirror with a Kendo React Editor in a project and are noticing unexpected behavior. Our project has sections of a page with many editors initially set to read-only and an edit button at the top. When a user clicks on the button, a variable changes and the page refreshes and the editors are editable.

The problem we are seeing is that if a user clicks the edit button and then immediately clicks into an editor box, by the time page refreshes (1-2s, small delay) the caret position is invisible initially. The caret will become visible once the user types or clicks again in a box. Because the user can immediately type and input begins where they clicked despite no visible position, we know the position is “active,” but we are unable to see it. Is there a way to force this caret to become visible?

The caret is drawn by the browser. This sounds like it might be a browser issue. Did you test different ones?

Thanks for the quick reply!

Good point - I just tried it on Chrome versus Safari initially. It appears that Safari behaves as I described where placing an “invisible” cursor where a user clicked. However, Chrome does not place the cursor until the user clicks again; typing from Chrome won’t register or input anything until this is done.

So, I guess I will look into trying to get where the user has clicked and focus there. Is this a ProseMirror issue or more strictly ReactJS?

ProseMirror also doesn’t do automatic focus/cursor restoration across page loads, so I’m not sure where all that is coming from.