When scrolling the cursor into view, CM doesn't notice when it's wrapped in an additional scrollable container

[curvedmark]

Pardon my lengthy title. :)

This issue is better illustrated with an example: http://jsfiddle.net/vgZrs/

Try to insert a new line by pressing enter. The container is expected to scroll to bottom to display the cursor, but that only happens after you have actually typed some character.

This issue exists on all browser I tested: Chrome, Firefox, Opera (all in the latest dev version)

[peterkroon]

Try

.CodeMirror {
    height: 100%;
}

[curvedmark]

This does fix the problem. Thanks

However, height: 100%; is different from height: auto. In my case, I have other elements exist inside the container. So I really can't give CodeMirror a full height.

[curvedmark]

Actually there is another problem with height: 100%;. By using height: 100%;, codemirror's height is fixed, it no longer grows as more text is typed, and scrolling is now handled by codemirror instead of the container.

I updated the demo to put an additional element before codemirror: http://jsfiddle.net/vgZrs/4/
I also tested the v3.1 branch, which has the same issue: http://jsfiddle.net/vgZrs/5/

[marijnh]

Yes, this is something that CodeMirror won't currently handle. It makes an effort to (vertically) scroll the cursor into view when the top-level document is scrolled away from it, but nothing beyond that. On WebKit, there's the scrollIntoViewIfNeeded method, which is pretty much what we want here, but it doesn't exist on other browsers, and emulating it is quite a bit of extra code and extra work, which I'm not sure is worth it.

You could consider listening to the cursorActivity event on CodeMirror and doing manual scrolling-into-view of the cursor there. Alternatively, you can take a stab at making CodeMirror handle this situation properly, though I'll only take a patch if it's relatively small.

[curvedmark]

Thanks for the heads up.

I've actually simplified my design to just use a 100% height editor, but I suspect the container will eventually to be added back. When that happens and it's still not fixed in the CodeMirror, I would certainly take a stab at it.

However, a quick search shows someone did try to implement a cross-browser scrollIntoViewIfNeeded. The implement has a few limits mentioned by the author. Not sure how much that might be of help.

Also I did try to understand how the editor is scrolled into view by reading your blogs. One of them mentioned the hidden textarea, said browser scrolls it into view when there is activity in it. So I expect the content of the hidden textarea and the content of the editor are in sync, but probing the value of the hidden textarea shows it's only a few spaces chars (after the editor has been initialized, in the demo I provided earlier). Is the description in the blog still valid (in which case I must have missed something) or the model has actually changed?

Thank you for sharing this great project and providing thorough documents. :)

[marijnh]

I found that implementation of scrollIntoViewIfNeeded as well -- but it's quite a lot of code for a feature that most users will never need.

The reason pressing Enter did not scroll the cursor into view, but typing regular text did, is precisely this hidden textarea. Whenever it gets input, it'll scroll into view. But CodeMirror handles Enter directly, so there the browser's behavior didn't kick in.

[curvedmark]

I'm inspired to come up with a flawed solution: http://jsfiddle.net/vgZrs/6/

It blur() and focus() the hidden textarea when Enter is pressed, which scrolls it into view, but somehow this method doesn't work with keydown event, so if you keep pressing Enter, it won't scroll until you release the key.

But do you think I'm on the right track? If the hidden textarea could somehow be updated when Enter is pressed, the problem will be solved.

[curvedmark]

A naive thought: why not let the textarea receive the actual Enter key, but does not insert the char into editor? Is it really hard to do that?

[marijnh]

I'm not sure that'd work (if it receives the key, it'll insert a newline, which then has to be somehow filtered out again), but it'd also not really solve the whole problem. Other keys, such as cursor movement, would still have the same problem.

[rickhall]

Just wanted to add my $0.02...it seems without this ability, auto-resized CodeMirror instances are of questionable usefulness, because at some point they will grow to big and need to be scrolled by their container.

[danday74]

Thanks to @jmuharsky who has provided a very simple and clear reproduction of this problem:

https://jsfiddle.net/jmuharsky/kpza6wuu/2/

[brezhitskiy42]

Did anyone solve this issue?