Codemirror cursor is not (partially) visible

When I open codemirror editor which is on popup, my cursor is not visible until I type in one character in it from keyboard. I have also tried to open it with some default text value, it shows the text but doesn’t show the cursor until I type-in and if I try to select that default text using mouse drag or mouse double click, selection is also not shown but it get selected (even if selection is not visible) and I can replace that text.

Sounds like the editor is first drawn in an invisible or differently sized element, and then shown in its final shape. You have to call the refresh method (or use the autorefresh addon) once the editor becomes visible to give it a chance to update itself.

I tried both approaches, still its not working :worried:

If you can submit a minimal HTML page that shows the issue, I’ll take a look.

Please refer the following html… formed after codemirror get rendered

><div class="CodeMirror-cursors"><div class="CodeMirror-cursor" style="left: 0.0500488px; top: 0px; height: 0.209991px;">&nbsp;</div></div>

No, I don’t mean a snippet of HTML from inside your CodeMirror, I mean a full HTML page that loads/uses CodeMirror in a way that triggers the problem.

I am reviving this thread to say that I had the same issue and was happy to see this in my google results. Like op, I had trouble getting Codemirror to show a cursor flashing when clicking a Codemirror field within a modal dialog, even though the input was indeed focused and ready for user input. However, calling refresh() worked for me. Thanks Marijn!

I’m experiencing the same behavior with v5.37 and Chrome 66.0.3359.117, Chromium 65.0.3325.181 and Firefox 59.0.2.

When Codemirror-cursor is initialized for the first time with an empty string value
style=“left: 0px; top: 0px; height: 15px;”

And after typing something and erasing it

style=“left: 4px; top: 0px; height: 14px;”

I have already tried calling refresh just after the fromTextarea call, but this behavior remains unchanged

EDIT: ok, it works when the refresh is called in a setTimeout.

setTimeout(() => void instance.refresh(), 0)
1 Like