Losing focus when switching to read-only mode

I am using editable callback to occasionally temporarily switch the editor to the read-only mode. This is generally very short-term and users do not really notice it (but it helps me a bit with making sure client state during some complicated computations on the server stays fixed). But it seems ProseMirror resets the focus and removes it when I go between editable -> not editable -> editable. Would that be something which could be better fixed inside the ProseMirror? I might do it in the editable callback, that I see when I will return false and then store focus and the next time I will return true I register some setTimeout(0) to restore the focus. But it feels a bit ugly.

Non-editable DOM elements can not be focused, at least not by default, which may be why you’re seeing the focus change. You could try adding a tabindex="0" attribute on the editor (via the attributes prop) and see if that makes things better.

So I understand why the focus is lost when editor is editable mode. But my hope would be that ProseMirror would restore it once it gets out of the editable mode. The rest of the editable state seems to be preserved (like undo/redo history, which buttons are pressed), only the selection is lost. I see that also as state. Maybe selection state is not lost, just its sync with the browser is?

In fact, tabindex="0" works great! What a surprise. Thanks for suggesting that.

Focus is not part of the editor state, but treated as transient DOM state. Also, automatically restoring focus has the potential to be very disruptive (when the user has moved the focus elsewhere and expects it to remain there) so that doesn’t seem like a good feature to have.