Cursor repositioned while editing example

[AoDev]

Hello,

When editing a live snippet the cursor will sometimes be repositioned at the beginning of the snippet.

It is annoying because the snippet will break while typing. Plus, you have to correct the "mess" before continuing.

My first guess is maybe because react is re-rendering, so the mouse cursor is moved at the beginning?

[sapegin]

I’ve noticed it recently and looks like it’s something relatively new. But I haven’t had time to investigate it yet.

[mik01aj]

It's not new, I noticed it sometimes in 1.x too. Looks like before first code change in CodeMirror the cursor position is calculated using some smaller font-size.

Ah, or wait, maybe we're speaking about 2 different bugs...

Btw, I also noticed the repositioning to the beginning as @AoDev describes, this makes it hard to type in the examples.

[tizmagik]

Having the same issue. I'm glad it's not just me. Any idea when this started happening? Maybe we can nail down the exact change?

I noticed it also only happens when you type quickly. If you type very slowly it doesn't seem to happen, which makes me think it has something to do with the timing of re-rendering the component while typing in the codemirror box.

[AoDev]

While investigating, I've seen that changing the debouncing delay of the editor to 1000 ms prevents this from happening. https://github.com/sapegin/react-styleguidist/blob/master/src/rsg-components/Editor/Editor.js#L14

But the update is delayed.

[mik01aj]

Imho it's fine to delay the update but I will not give my 👍 until we actually UNDERSTAND why this happens. (Nailing down the commit with git bisect would be enough I guess).

[AoDev]

Sure, just giving some hints.

[tizmagik]

Submitted #145 to address this. Details about why this happens written there.