Cursor jumps to beginning of line on mobile browsers when focus is lost

[JannemanDev]

I have a button and a codemirror edit field where a user can type in a SQL query. When they press the button, they query gets send to the server to run and the recordset will be displayed. After clicking on the button, I refocus to the editorwindow so the user can change the SQL query immediately.
On non-mobile browsers this works perfectly, the cursor is put back on the last known position automatically with just this code:

$("#btnRunQuery").on("click", function( event ) {
[...]
editor.focus();
}

But on mobile browsers the cursor is always set to the beginning of the line of the last known position. I tested in latest FF, Chrome and Safari on iOS v11.4.1 with latest codemirror lib.

I tried to make a work around with this code, but same problem:

$("#btnRunQuery").on("click", function( event ) {
          //save last cursor pos
          var line=editor.getCursor().line;
          var ch=editor.getCursor().ch;
         [...]
          editor.focus();
          editor.setCursor({line: line, ch: ch});
}  

Also saving the cursor pos on the Blur event doesn't work.

[JannemanDev]

I found a workaround. If you change the inputStyle to "textarea" it works (even without the workaround code above)!
This bug is maybe related to #5415, #5405

By the way I could not find any information on inputStyle and the differences between textarea and contenteditable besides:

inputStyle: string
Selects the way CodeMirror handles input and focus. The core library defines the "textarea" and "contenteditable" input models. On mobile browsers, the default is "contenteditable". On desktop browsers, the default is "textarea". Support for IME and screen readers is better in the "contenteditable" model. The intention is to make it the default on modern desktop browsers in the future."

[marijnh]

If you change the inputStyle to "textarea" it works

That'll break touch selection, though

[martinschilliger]

Found the solution here:

[contenteditable="true"] {
    -webkit-user-select: text;
    user-select: text;
}

[dmortimer]

@martinschilliger what element are you applying that CSS to? Along with the cursor position jumping to the beginning, I am also having an issue where codemirror.hasFocus() returns false on IOS when it should return true.

[martinschilliger]

Just:

[contenteditable="true"] {
  user-select: text;
}

codemirror.hasFocus() is working that way also. 👍