Page jumps around with CodeMirror instances below the fold

[stiang]

I figured it would be better to have a separate issue for this, so here is what @scniro wrote about it in #3:

@stiang thanks for the feedback and sharing more details on this secondary issue! I indeed get the page jump you describe when I have enough instances on the page. This side effect seems to have been introduced from the fix I implemented for #1 - specifically, preserving and setting the cursor position. The page is jumping down because it's trying to set the cursor for the last instance, even if untouched and is internally at 0,0.

Without a change, there is a workaround currently but I'm not thrilled with it. If you specify resetCursorOnSet={true} - you'll be okay and the page won't jump. However, you'll not be getting a cursor position saved/set for your editor. There may be a better way to address this now that both sides of the above mentioned fix have surfaced. In the least, I'll be renaming this prop soon (I don't think it's very descriptive). Also please give #1 a look for some background on the issue should my suggestion not make total sense here.

I can confirm that resetCursorOnSet={true} fixes the jumping-around-issue, but unfortunately it resets the cursor even in the active CodeMirror instance (the one you’re typing in), so that doesn’t really work. And even if it did, for my use case it would be best to retain the cursor position in all instances.

It would be awesome if you were able to come up with a fix :)

[scniro]

thanks for opening this up here. I closed out #3. I'll give this a look very soon!

[scniro]

Okay, I believe I have the fix for you. As it turns out, there is an underlying scroll option that can be leveraged.

Determines whether the selection head should be scrolled into view. Defaults to true.

I opted to keep the default set to true, but have added a prop to opt out. Adding autoScrollCursorOnSet={false} should do the trick for you. 0.0.11 should be available via npm. Please share your feedback when you can?

[scniro]

@stiang hey were you able to check out my fix at all yet?

[stiang]

@scniro Yes, I checked out 0.0.11, but it didn’t work properly for me. The mode was not set correctly, so I got no styling. It also still jumped around. However, using the JSX file directly in my project worked, so maybe it was just the transpiled version that was broken?

Anyway, I needed to move forward quickly, so I am now running a modified version of your library directly in my React project. I was able to get rid of the jumping around by not setting the CodeMirror value (with setValue from React) for every change, but only doing it when the component’s value differed from the getValue value (since CodeMirror sets its own internal value on changes anyway).

This was done rather quickly, and I’m not sure if my changes will work for your other users, so I haven’t submitted a PR or anything like that, but let me know if you want some of my changes. I’m pretty happy just using my modified version going forward - it’s a simple/small enough component.

[scniro]

@stiang interesting. I'm sorry about the back-n-forth. Weird that the jsx version is working for you. Either way, I peeked at this again and noticed a slight defect that may have been causing some trouble. 0.0.12 is pushed up if you'd care to try it out as I'd like to iron this one out for you! If the changes don't quite solve it still I'd be happy to hear about the workaround you arrived to. Thanks!

[scniro]

I'm going to close this for now - please re-open should this still be a problem and I'll get back into it

[danday74]

Thanks just to confirm I had this issue with multiple react-codemirror2 elements on the same page, rendered iterlatively in a list, ... autoScrollCursorOnSet={false} fixed it for me :D thx