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.

Cursor problem

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!