[I Have Solution] On iPadOS with a physical keyboard, certain input methods in the editor using codemirror may shift upward

[hlf20010508]

On IpadOS, when using physical keyboard, certian input methods may shift upward, like this:

This happens because the cursor is in the lower half of the screen.

If the cursor is in the upper half of the screen, the input method is under the cursor, which doesn't have any problem.

I've checked HTML:

So it seems to be CodeMirror's problem, not the editor's. (Or you can say it's iPadOS's problem 🤣) And I've checked your release, and didn't find update about this problem.

I deleted overflow: hidden; in div, and set div's and textarea's width to 100px(in desktop textarea's width is 1000px, but I don't know why it's 0px in iPadOS. But if I set it to 1000px, there are another problem, but it's not necessary to talk about it right now, because my solution can avoid this problem too) for example, to debug, and found out the reason.

The text in textarea auto wraps, which causes input method on iPadOS to shift upward.

So the solution is to disable auto-wrap.

In my editor I just added a css:

.CodeMirror.cm-s-easymde.CodeMirror-wrap div textarea {
    white-space: nowrap;
}

This doesn't cause more trouble in desktop, so I think you can fix this problem by adding this to CodeMirror.

[marijnh]

It looks like there is already code that either sets a large width or turns of wrapping.

    // The textarea is kept positioned near the cursor to prevent the
    // fact that it'll be scrolled into view on input from scrolling
    // our fake cursor out of view. On webkit, when wrap=off, paste is
    // very slow. So make the area wide instead.
    if (webkit) { te.style.width = "1000px"; }
    else { te.setAttribute("wrap", "off"); }

Yet the textarea in your screenshot seems to have neither. Why?

[hlf20010508]

Oh maybe that's because the editor used old version of codemirror.

Thanks for your instruction.

[hlf20010508]

Oh maybe that's because the editor used old version of codemirror.

Thanks for your instruction.

Oh no, I've checked the version, the editor used 5.63.1 which has the code you mentioned too.

[hlf20010508]

I don't know if it's because of iPadOS 16. Both Safari and Firefox has this problem.

I can provide the editor and my project if you need.

[marijnh]

The code I pasted should run for every hidden textarea created by the editor. You'll have to debug how, in your case, it ends up creating a textarea with neither a width nor a wrap attribute.

[hlf20010508]

webkit is true, so the problem is why width is not 1000px.

I'll keep on trying.

[hlf20010508]

Oh, here, in TextareaInput.js, it set ios device to 0px.

[hlf20010508]

And I've tried setting width to 1000px, it works fine too.

So both width: 1000px; and white-space: nowrap; works fine.