Freecodecamp: Cursor jumps randomly in Code Editor.

I could not reproduce this.

Could you provide some more information about your device / browser? I'm able to type within the editor as soon as a challenge loads, with the editor automatically taking focus, without needing to press enter.

It could be an issue specific to your setup.

I think I'm having the same issue with the editor.

In this exercise (please see image below) for example, I'm not able to focus some parts of the code before hitting enter (Neither with the mouse, nor with the keyboard). No matter where I'm clicking below line 54, the cursor jumps right to the beginning of line 54. After hitting "enter" once anywhere in the code, it all works fine!

I'm running latest Version of Chrome on Windows 10. I've noticed this issue in most of the exercices so far.

I have the same issue as smlabt no matter what exercise i'm doing. I'm using Firefox on Windows 10.

Line 56 input>would that work

For anyone having this issue please post your browser, os and challenge you first experienced this on. If possible a video of a GIF of the problem would be extremely helpful. Without this information the issue cannot be fixed.

Like I said I'm using Chrome on Windows 10.
Please try to reproduce the issue with a smaller window. I can imagine that this behaviour could have been caused by the line breaks.
I will try to create a gif asap.

@smlabt don't worry about the gif i have successfully reproduced it. Thank you for the help!

In some tasks the cursor won't go till last line ,it stopped going down before 3-5 line above ,so i had to make space above to complete it .(occurred mostly in html-css tasks)
My user agent is Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/49.0.2623.112 Safari/537.36 @BKinahan

Using this for the first time and this usability issue it the first thing I noticed. It's true for all challenges I've tried so far in the javascript path. The _only_ way I can get to the code window is to click in. This is also true for scrolling the instructions panel.

Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/49.0.2623.112 Safari/537.36

I just started learning to code on Code Free Camp. As I literally just started I am a bit anxious in even trying to offer my help in diagnosing the issue.

What I can offer is my experience. Each time I load a page, I click onto the code window and try to type at the clicked location.
The actual location that it types at is bellow (seeming randomly) a short distance down from where I originally clicked.

The only time the cursor failed to jump down was when I clicked on first line in the editor. The one it starts at when the page loads.

(edit)
I also wanted to add. The problem seemed to not be an issue again starting on "https://www.freecodecamp.com/challenges/create-a-bootstrap-headline"
but its still an issue if I go back to the previous lesson.

Here is the fix that I use:

When the cursor starts becoming unresponsive, scroll down to the last line of the code - there is usually a blank line.

Place your cursor on the blank line, and use "delete" or "backspace" to bring the cursor up to the line that has text on it.

The cursor will now work fine for this challenge.

I have been having this issue since Challenge #35, using Chrome on Windows 10. The issue persists intermittently. When I encounter it again I will record it.

have same issue here

Same issue. Using latest Chrome with Windows 8.1. Don't remember exactly which challenge it started on, but my guess would be somewhere between 30 - 35.

Same happened once on mobile.

Although it isn't a very good demonstration of this bug, I managed to make a GIF of the cursor skipping a line.

Thanks everyone for your reports.
We have updated CodeMirror a couple of days ago (see https://github.com/FreeCodeCamp/FreeCodeCamp/pull/8737) and, hopefully, this issue is solved with that update. I'm going to close it but, @sadathanwar17 please, feel free to reopen if you still can reproduce this issue, thanks.

---

Please review the Guidelines for Contributing, thank you!.

---

@sadathanwar17 @bugron This bug still seems to be active. I can reproduce it here https://www.freecodecamp.com/challenges/create-a-text-field.

• Chrome 50.0.2661.102
• Macintosh OS X 10.11.2
• Browser Size 1680 x 952
• Screen Resolution 1680 x 1050

Thanks @sadathanwar17!
Yes I can still reproduce this at times. and as confirmed from another issue as well.

Re-opening.

Happening for me now too. I don't know if this helps but it didn't start til around exercise 30-35ish as someone mentioned above (very rough estimate since I wasn't looking out for it). Maybe the length of the code or number of lines somehow plays into it. The first handful worked fine but once I got down to the bottom of the editor (and subsequently the scroll bar appeared), that is when I started noticing it. Just a random thought.

have to agree with @mbrannon I'm getting it on "Call out Optional Actions with Button Info" and the pages around it, can't select anything below the start of line 55 and the cursor randomly jumps from wherever I click to somewhere nearby

Im having the exact same issue as dmatt. Cannot select the column of some lines. It seems like the code and the allowed lines are 'misaligned' because the selectability of the columns looks like its dependent on the line after it.

Running windows 10 on lastest version of chrome on Surface pro 3

I am having the same issue still- running the latest Google Chrome on Windows 10.

+1
I am having the same issue that I think people are discussing in all exercises in the first HTML lesson so far. I think issue #8226 does a good job of explaining the issue.

It seems they've not worked on this issue because I'm getting the same issue up till now. And I just joined FCC yesterday.

+1 issue intermittent, refresh sometimes helps. typing any character then removing it temporarily fixes it for that challenge

I think this is caused by line wrap, changing the page zoom until lines do not wrap fixes the problem.
Maybe we should just not wrap...

This issue is quite annoying, removing class CodeMirror-wrap from the top div seems to fix the issue
<div class="CodeMirror cm-s-monokai CodeMirror-wrap" style="width: 100%; height: auto;">

https://github.com/FreeCodeCamp/FreeCodeCamp/blob/staging/client/commonFramework/create-editor.js#L22
lineWrapping: true,

@heldersepu thanks a lot for the in depth analysis, however this is a really tricky bug, if I remove the wrapping and add the native scrollbar the editor is rendered in a weird way.

Maybe that can be fixed, however the more tedious part is that I can't seem to reproduce this any longer on my local setup.

It's still there on the production (main website).

Feel free to make a pull request if you would, with a definitive fix.
Thanks once again.

What if you wrote a script that went to the end of the last line in the code editor then deleted (not backspaced) 1 char? Then the user would be able to place their cursor wherever they liked afterwards...just a fix for now?

I honestly do not see any value on the line wrap...
If is up to me I just disable the wrap, and forget about the scrollbars.
On Jun 16, 2016 8:43 AM, "Mrugesh Mohapatra" [email protected]
wrote:

@heldersepu https://github.com/heldersepu thanks a lot for the in depth
analysis, however this is a really tricky bug, if I remove the wrapping and
add the native scrollbar the editor is rendered in a weird way.

Maybe that can be fixed, however the more tedious part is that I can't
seem to reproduce this any longer on my local setup.

It's still there on the production (main website).

Feel free to make a pull request if you would, with a definitive fix.
Thanks once again.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/FreeCodeCamp/FreeCodeCamp/issues/7847#issuecomment-226473258,
or mute the thread
https://github.com/notifications/unsubscribe/AAhSwiySJLjhb0l-M78ZmGbh69lo4rNQks5qMUTjgaJpZM4H91tE
.

@leonsegal here a one line script that fixes the issue:
$(".CodeMirror-wrap").removeClass("CodeMirror-wrap")

@heldersepu well, we can either have the scrollbars or the wrap, else the code can't be browsed on smaller view ports.

@heldersepu so I should manually edit the code in my browser each time I use the page?

@raisedadead I don't have a fully functional local setup but if you can change the create-editor.js to:
lineWrapping: false,
Make sure it renders the div without the CodeMirror-wrap we should be good to go.

But this is something that should be consulted with other maintainers, put it to some kind of vote.

@heldersepu I did exactly that.

First I removed the wrapping,
lineWrapping: false

This left me unable to browse the code horizontally (for longer lines).
so, I tried adding the scrollbars with
scrollbarStyle: 'native',

This renders the entire thing in a very weird way, on top of that this issue is NOT reproducible in the local setup, making the fix un-testable before making a push.

@leonsegal unfortunately yes, (until a final fix is deployed, keep in mind I do not have those rights) That's what I've been using to get around it.

@raisedadead about unable to browse the code horizontally
If you click on the long line and press the [end] key can you get to that line?
What about moving with the arrow keys?

Nope nothing seems to work, the mouse buttons, arrow keys nothing.

P.S Let's continue the chat in the Contributors Chat room.

I think I mostly noticed the issue when the code became long enough to require vertical scroll, not so much an issue with line wrapping (although I could be wrong). Just a thought.

Just to keep a record of our findings:

• This is an issue with the CodeMirror code editor
• As a workaround we could disable the lineWrap and use the simplescroll addon:
  https://codemirror.net/demo/simplescrollbars.html

+1

+1

I've tried with Firefox, Safari, Edge, Chrome, Vivaldi and Opera, but this issue keeps working.

Im using Chrome v51 64bit ( latest version ) on Mac and still have the same issue.

Hey guys this is confirmed issue, kindly use the reactions on the first post instead for confirming.

Let's keep the thread clean for potential solutions only.

same problem still appearing
OS : Ubuntu
Browser: Chromium

Still occurring for me too. It seems to have started around the 60's for me.

OS: Windows 10
Browser: Firefox

If anyone is interested in a long-term workaround, I used this Chrome extension with @heldersepu's script: $(".CodeMirror-wrap").removeClass("CodeMirror-wrap")

I've been using space to figure out where the cursor is, as opposed to Enter (forcing a line break). It's been lower impact for me. I would entertain a "suggested browser" for FCC exercises if we get to a solution on any of them.

I've been experiencing this issue since a very early exercise. I just hit 100.

OS: OSX
Browser: Chrome & Safari

I'm wondering if it may have to do with having chrome extensions installed? I have a handful: Adblocker, Microsoft Rewards (don't judge), Honey, Avast, Grammarly, Mightytext. (That said, I do experience this in Safari which I very rarely use and haven't consciously installed any extensions on)

@sethmchris's suggested (@helderspu's created) workaround seems to have done the trick though. (Thanks)

This one is hard to test for since I've yet to see someone reproduce it locally and it seems to show itself based on conditions that have yet to be determined. I suppose the best course of action might be to try adding a few non-breaking fixes to see if one fixes it.

Here are some observations:
1) perhaps react-codemirror will fix this when the react updates go live?
2) Per @heldersepu's suggestion for using simplescroll, I can't seem to get it to apply correctly locally. It prevents the editor from loading correctly and the console shows the error: TypeError: CodeMirror.scrollbarModel[cm.options.scrollbarStyle] is not a constructor. Currently the scrollbarStyle is set to null so perhaps setting it to native would be worth a try. Setting it to native still allows the editor to load correctly.
3) Per this thread, I might suggest adding editor.refresh() to line 40 of the create-editor file.

Not to digress from the above points that changing the wrap to false might also work; as @raisedadead pointed out, I think it would cause errors with horizontal scrolling if we don't at the same time change the scrollbarStyle to native instead of null.

Hi, I'm new to this program and I have been experiencing the same issue from the first challenge. It is really annoying, specially when I feel like I'm on a roll and feel like I know what I'm about to do , but can't do anything right away because the cursor doesn't wanna go where I need it to .

if anyone has a solution, please tell me about it, I would greatly appreciate it.

thank you in advanced

@arias93jordy a few posts up @sethmchris posted a workaround. I've tested it and it works for me- give it a shot.

Thank you @sethmchris! This solution worked for me.

@sethmchris I tried your solution but it's not working for me... It disables the mirror wrapping function but the cursor still does whatever it wants :( maybe I'm doing it wrong? I simply installed the extension and copy pasted your piece of code and enabled the extension on the FCC website... Is there anything I'm missing?

Windows 10, Chrome version Version 54.0.2840.71 m.

I've noticed that the bug crops-up when the code sample loaded with the lesson contains lines that are long enough to be wrapped on to the next line. If all of the lines are short, there is no issue.

Going to the top line (position 0, line 0) and pressing delete once seems to fix the problem.

Yes Thank You!

On Tue, Nov 1, 2016 at 3:34 AM, svershin [email protected] wrote:

Windows 10, Chrome version Version 54.0.2840.71 m.

I've noticed that the bug crops-up when the code sample loaded with the
lesson contains lines that are long enough to be wrapped on to the next
line. If all of the lines are short, there is no issue.

Going to the top line (position 0, line 0) and pressing delete once seems
to fix the problem.

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
https://github.com/FreeCodeCamp/FreeCodeCamp/issues/7847#issuecomment-257534503,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ASTtQD6EtjYcLsMBHxY45d5-uEbIq5Zqks5q5xWfgaJpZM4H91tE
.

Google Chrome - Verified Open on 11/11/16.

Steps to Reproduce:
1.) Load any page with the code editor that contains a long line, such as [https://www.freecodecamp.com/challenges/center-text-with-bootstrap]
2.) Shrink the page to a size where the lines wrap.
3.) Perform a Hard Refresh of the page.
4.) Click toward the right side of the editor.
5.) Observe, the caret often does not move to the end of the line.

Hey guys this is confirmed issue, kindly use the reactions on the first post instead for confirming.

Let's keep the thread clean for potential solutions only.

I can reproduce the issue in Edge browser as well as Chrome. In order to get it to stop (for the current challenge only) I zoom out then zoom back in. It sucks but it works for me.

I had this issue as referenced by @erictleung here

for some reason I didn't get an email notification that anyone had responded to it until the issue was closed.

hitting enter does seem to fix it

I have the same issue:

1. Can't position cursor in some areas, not with click, nor with keyboard arrows
2. When I try to delete something, other stuff is deleted, like cursor position is incorrect

This happens with chrome and firefox
Update: "Reset" Code button helped this time, but only in one particular challenge.....in the next one, issue reproduces itself....and I'm forced to reset code again and it happens every time with new challenge.

@mrgizmo thanks, please refer https://github.com/FreeCodeCamp/FreeCodeCamp/issues/7847#issuecomment-260019777

I have locked the conversation temporarily on this thread to collaborators only, this has been resolved in staging, and will be live soon.

The fix can be confirmed on the beta website.

The workaround currently on production website is:
Press the Enter key on the challenge editor and then proceed with the challenge.

Apologies for the inconvenience meanwhile.

Reach us in the chat room if you need any assistance.