The cursor position does not match the input

[xiaoguoqingxx]

Problem

There is a problem with the cursor position in my code

Sample code to reproduce your issue

<AceEditor 
                                width="100%" 
                                height="400px"
                                ref={editor}
                                mode="python"
                                fontSize="14px"
                                value={field.plugin_code}
                                showPrintMargin={false}
                                theme="chrome"
                                onChange={changeContent}
                                setOptions={{
                                    useSoftTabs: true
                                }}
                                cursorStart={1}
                                name="插件"
                                onFocus={focus("plugin_code")}
                                style={{ border:"1px solid var(--inputcolor)",lineHeight:"24px"}}
                                editorProps={{ $blockScrolling: Infinity }}

                            />

References

Progress on: #

[Athinodoros]

I have the same experience the cursor has an offset of 4 slots

[cretto]

up

[damianijr]

same here, news?

[patire-tu]

Yes! We found this problem appeared in chrome version 72 and 74, but correct in verion above 76. It running normally in firefox browser, not precise. By the way, font-family replace with monospace is not effect at all!

[mattwebdev]

im getting this same error on chrome Version 77.0.3865.90 (Official Build) (64-bit)

any fix?

[maheshsundaram]

Hm, seeing the same issue in Firefox 74.0 (64-bit) and Chrome 78.0.3904.108 (Official Build) (64-bit) on macOS Mojave 10.14.6. Has anyone come up with a fix or workaround?

[maheshsundaram]

For me it turned out that a global rule was overriding the font-family for span which was causing the cursor issue:

// global.scss
span {
  font-family: $font-stack;
}

Solution for my use case:

// styles.module.scss
.ace_editor span, .ace_editor textarea {
  font: 12px/normal 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;
}

import styles from "./styles.module.scss";

export const Editor: React.FC = () => {
  return (
    <AceEditor className={styles.ace_editor} />
  )
}

[flamz3d]

for me this occurs 100% of the time, I think it is caused by the auto identing. Using with this csharp snippet:

namespace foo
{
[auto-indent] class MyClass
                      {
[auto-indent][auto-indent] public int bar: **<<<< cursor totally wrong**
                      }
}

[xiaoguoqingxx]

这是来自QQ邮箱的假期自动回复邮件。你好，我最近正在休假中，无法亲自回复你的邮件。我将在假期结束后，尽快给你回复。