Caret (text cursor) offset is not sticking to the end of the line

[shaibam]

Problem

When typing in the code the Caret offsetX grows and moves far away from the end of the line.
My code is very basic

Sample code to reproduce your issue

import AceEditor from 'react-ace';

import 'ace-builds/src-noconflict/ext-language_tools';
import 'ace-builds/src-min-noconflict/mode-mysql';
import 'ace-builds/src-noconflict/theme-sqlserver';

export default function QueryEditor({ value, onChange = () => {} }) {
  return (
    <div>
      <AceEditor
        id="editor"
        aria-label="editor"
        mode="mysql"
        theme="sqlserver"
        name="editor"
        width="100%"
        fontSize={14}
        lineHeight={19}
        minLines={15}
        maxLines={10}
        showPrintMargin
        showGutter
        highlightActiveLine
        placeholder="Write your query here..."
        editorProps={{ $blockScrolling: true }}
        setOptions={{
          enableBasicAutocompletion: true,
          enableLiveAutocompletion: true,
          enableSnippets: false,
          enableMobileMenu: true,
          showLineNumbers: true,
          tabSize: 2
        }}
        value={value}
        onChange={onChange}
        showLineNumbers
      />
    </div>
  );
}

References

caret.mp4

Progress on: #

[shaibam]

This seems to help (css)

  * {
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro',
      monospace !important;
  }